jquery ajax xml 实现select联动

棒棒糖 · 发表于 2013-2-7 21:24:30

用jquery的ajax实现select的联动
兼容大部分浏览器 IE6 FIREFOX已测试过

主要代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联动下拉框AJAX Xml</title>
<style>
select {
width:100px;
}
</style>
<script src="jquery.js" language="javascript"></script>
<script language="javascript">
//读取1.xml中行政区域名
$(document).ready(function(){
$.get('xml/1.xml', function(d){

$(d).find('area').each(function(){
var $area = $(this);
var value = $area.attr('id');
var name = $area.attr('name');

var html;
html += '<option value=' + value + '>';
html += name;
html += '</option>';

$('#area_1').append($(html));
});
});
});
//先读取朝阳区的地址板块
$(document).ready(function(){
$.get('xml/2.xml', function(d){

$(d).find('area').each(function(){
var $area = $(this);
var value = $area.attr('id');
var name = $area.attr('name');

var html;
html += '<option value=' + value + ' >';
html += name;
html += '</option>';

$('#area_2').append($(html));
});
});
});

//点击下拉框一所做的操作
function changeArea_1(obj){
var sel = obj.options[obj.selectedIndex].value;
$.get('xml/'+sel+'.xml', function(d){

clearOption("area_2");
$(d).find('area').each(function(){
var $area = $(this);
var value = $area.attr('id');
var name = $area.attr('name');

var html;
html += '<option value=' + value + ' >';
html += name;
html += '</option>';

$('#area_2').append($(html));
});
});
}

function clearOption(id){
var obj=document.getElementById(id);
for(var i=0;i<obj.length;){
obj.remove(i);
}
}
</script>
</head>
<body>
<h1>联动下拉框AJAX从XML读取数据：</h1>
行政区域：<select id="area_1" onchange="changeArea_1(this)" ></select>
地址板块：<select id="area_2" onchange="" ></select>
</body>
</html>

		自动登录	找回密码
密码			立即注册