首先这是本人所使用的xml文档(Provice_city_town.xml),位置在根目录下的XML文件夹下。
下面的是js代码,建议放在单独js文件中,本人暂时将放在HTML中。
最下面的是HTML代码,位置在根目录下的HTML文件夹下。
<?xml version="1.0" encoding="utf-8" ?>
<config>
<province value="1" name="河北省">
<city value="1" name="石家庄市">
<county value="1" name="桥东区"></county>
<county value="2" name="长安区"></county>
<county value="3" name="裕华区"></county>
</city>
<city value="2" name="保定市">
<county value="21" name="安国市"></county>
<county value="22" name="望都县"></county>
<county value="23" name="徐水县"></county>
</city>
<city value="3" name="邯郸市">
<county value="31" name="大名县"></county>
<county value="32" name="峰峰矿区"></county>
<county value="33" name="武安市"></county>
</city>
</province>
<province value="2" name="北京市">
<city value="11" name="西城区"></city>
<city value="12" name="海淀区"></city>
<city value="13" name="朝阳区"></city>
</province>
<province value="3" name="上海市">
<city value="31" name="黄浦区"></city>
<city value="32" name="静安区"></city>
<city value="33" name="闵行区"></city>
</province>
<province value="4" name="四川省">
<city value="41" name="成都市">
<county value="41" name="武侯区"></county>
<county value="42" name="锦江区"></county>
<county value="43" name="双流县"></county>
</city>
<city value="42" name="乐山市">
<county value="51" name="峨眉山市"></county>
<county value="52" name="沐川县"></county>
<county value="53" name="夹江县"></county>
</city>
<city value="43" name="眉山市">
<county value="61" name="仁寿县"></county>
<county value="62" name="青神县"></county>
<county value="63" name="洪雅县"></county>
</city>
</province>
</config>
下面的是js代码,建议放在单独js文件中,本人暂时将放在HTML中。
$(function () {
Bindprovice();
$("#province").change(function () {
pid = $(this).val();
$.ajax({
url: "../XML/Provice_city_town.xml",
dataType: "xml",
success: function (data) {
$("#city").empty().append($('<option></option>').val(0).html("--请选择--")); //这里注意添加empty()函数,在切换时要清空原有的内容
$(data).find("province[value=" + pid + "]").children("city").each(function () { //查找value的选中项的省,然后查找子节点。
$("#city").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));
})
},
})
})
$("#city").change(function () {
cid = $(this).val();
$.ajax({
url: "../XML/Provice_city_town.xml",
dataType: "xml",
success: function (data) {
if ($(data).find("city[value=" + cid + "]").children("county").length > 0) //判断是否存在子节点
{
$("#county").next("span").show().end().show().empty().append($('<option></option>').val(0).html("--请选择--")); //如果存在子节点,则显示县级下拉框以及其后的文字。
$(data).find("city[value=" + cid + "]").children("county").each(function () { //查找value的选中项的市,然后查找子节点。
$("#county").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));
})
} else {
$("#county").hide().next("span").hide(); //如果无,则隐藏县级下拉框以及其后的文字。
}
},
})
})
})
function Bindprovice() {
$.ajax({
url: "../XML/Provice_city_town.xml",
dataType: "xml",
success: function (data) {
$("#province").empty().append($('<option></option>').val(0).html("--请选择--")); //这里注意添加的HTML文本要变成jquery类型,前面加$符号
$(data).find("province").each(function () { //这里注意function后面的括号,不能少写。
$("#province").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));
})
},
})
}
最下面的是HTML代码,位置在根目录下的HTML文件夹下。
<!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>
<title>JS读取XML实现省市县级联</title>
<script type="text/javascript" src="../JS/jquery-1.6.2.js" ></script>
</head>
<body>
<form action="JS读取xml实现省市级联.htm">
<select id="province">
<option>--请选择--</option>
</select>省/直辖市/自治区
<select id="city">
<option>--请选择--</option>
</select>市/区
<select id="county">
<option>--请选择--</option>
</select><span>县/县级市</span>
</form>
</body>
</html>
执行结果如下图所示:
此图为除直辖市外的省市截图
此图为四个直辖市的截图