用jaxa做一个省市县级联的Demo
完整代码加数据都在连接里
连接有数据,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript" src="jq.js"></script>
<body>
<select name="" id="">
<option value="-1">--请选择--</option>
</select>
<select name="" id="">
<option value="-1">--请选择--</option>
</select>
<select name="" id="">
<option value="-1">--请选择--</option>
</select>
<script type="text/javascript">
var xmlDom = null;
var $sels = $('select');
$.ajax({
url:'http://localhost/demo/ChinaArea.xml',
dataType:'xml',
success:function(res){
//console.log(res);
xmlDom = res;
var $prov = $(xmlDom).find('province');
$prov.each(function(i,v){
var op = $('<option value="'+$(this).attr('provinceID')+'">'+$(this).attr('province')+'</option>'
);
op.appendTo($sels.eq(0));
})
},
error:function(){
console.log('请求失败');
}
})
$sels.eq(0).change(function(){
// val 代表省的id
$(this).next().empty().html('<option value="-1">--请选择--</option>');
var val = $(this).val();
var $prov = $(xmlDom).find('province[provinceID='+val+']');
var $cities = $prov.find('City');
$cities.each(function(i,v){
var $op = $('<option value="'+$(this).attr('CityID')+'">'+$(this).attr('City')+'</option>') ;
$op.appendTo($sels.eq(1));
})
})
$sels.eq(1).change(function(){
// val 代表市的id
$(this).next().empty().html('<option value="-1">--请选择--</option>');
var val = $(this).val();
var $cities = $(xmlDom).find('City[CityID='+val+']');
var $pieceareas = $cities.find('Piecearea');
$pieceareas.each(function(i,v){
var $op = $('<option value="'+$(this).attr('PieceareaID')+'">'+$(this).attr('Piecearea')+'</option>') ;
$op.appendTo($sels.eq(2));
})
})
</script>
</body>
</html>