用jq+ajax+xml做的三级联动
html:
<form action="" method="post">
<select name="" id="sheng">
<option value="s">--省份--</option>
</select>
<select name="" id="city">
<option value="">--城市--</option>
</select>
<select name="" id="town">
<option value="">--县区--</option>
</select>
</form>
链接的是xml01.xml文件
<?xml version='1.0' encoding='utf-8'?>
<Location>
<Provinces name='广东' code='1'>
<city name='广州' code='1'>
<area name='天河区' code='1'></area>
<area name='天河区' code='2'></area>
</city>
<city name='东莞' code='2'>
<area name='新镇' code='2'></area>
<area name='天河区' code='2'></area>
</city>
<city name='佛山' code='3'>
<area name='顺德' code='3'></area>
<area name='天河区' code='2'></area>
</city>
</Provinces>
<Provinces name='广西' code='2'>
<city name='南宁' code='1'>
<area name='西乡' code='1'></area>
<area name='天河区' code='2'></area>
</city>
<city name='桂林' code='2'>
<area name='江南区' code='2'></area>
<area name='天河区' code='2'></area>
</city>
<city name='柳州' code='3'>
<area name='琅东区' code='3'></area>
<area name='天河区' code='2'></area>
</city>
</Provinces>
</Location>
在中加入<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function() {
$.ajax({
url: '/xml01.xml',
type: 'get',
async: true,
success: function(str) {
var p = $(str).find('Provinces');
$(p).each(function() {
$('#sheng').append("<option>" + $(this).attr('name') + "</option>")
})
}
})
$('#sheng').change(function() {
var countryvalue = $("#sheng").val();
$.ajax({
type: "get",
url: "/xml01.xml",
async: true,
success: function(str) {
$('#city').find('option').remove();
var C = $(str).find('Provinces[name='+countryvalue+']');
$("#city").append("<option value='0'>--城市--</option>");
console.log(C);
$(C).find('city').each(function() {
$('#city').append("<option>" + $(this).attr('name') + "</option>")
})
}
});
})
$('#city').change(function() {
var countryvalue = $("#city").val();
var selectvalue = $(this).name;
$.ajax({
type: "get",
url: "/xml01.xml",
async: true,
success: function(str) {
$('#town').find('option').remove();
var C = $(str).find('city[name='+countryvalue+']');
$("#town").append("<option value='0'>--县区--</option>");
console.log(C);
$(C).find('area').each(function() {
$('#town').append("<option>" + $(this).attr('name') + "</option>")
})
}
});
})
})
</script>
这是简单的编写