三级联动 大神来帮忙！！
我对js不是很熟悉， 现在要做一个 三级联动 省 市 区 大神来帮忙 讲解下 思路， 最好是代码实现 JavaScript
[解决办法]
联动的思路很简单，
就是change事件里发ajax请求，传参数，回调函数里根据响应更新选项
具体代码你得自己写
[解决办法]
1.创建3个下拉框，ddlProvince,ddlCity,ddlTown
2.页面加载时将省份的数去取唯一填充ddlProvince：select distinct(province) from table
3.ddlProvince发生change事件时，根据值区市数据填充ddlCity：select distinct(city) from table where province='ddlProvince选中值'
4.ddlCity发生change事件时，根据选中省、市值取数据填充ddlTowun：
select distinct(town) from table where province='ddlProvince选中值' and city='ddlCity选中值'
[解决办法]
<script src="js/provincesCity.js" type="text/javascript"></script>
<select id="sheng" name="sheng"><option>--请选择--</option></select>
<select id="shi" name="shi"><option>--请选择--</option></select>
<select id="xian" name="xian"><option>--请选择--</option></select>
function getXmlDoc(url) {
var xmlDoc;
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
var oXmlHttp = new XMLHttpRequest();
oXmlHttp.open("GET", "js/province_city.xml", false);
oXmlHttp.send(null);
return oXmlHttp.responseXML;
} catch (e) {
return;
}
}
xmlDoc.async = false;
xmlDoc.load("js/province_city.xml");
return xmlDoc;
}
window.onload=function() {
var xmlDoc = getXmlDoc();
//获取xml文件的根节点
var root = xmlDoc.documentElement;
//获取xml文件的根节点下面的省节点
var provinces = root.childNodes;
//获取页面中要显示的省、市和县的控件dom对象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//遍历所有的省
for (var i = 0; i < provinces.length; i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节Node.ELEMENT_NODE---1 -- 元素节点)
if (provinces[i].nodeType == 1) {
//创建一个option节点对象
var shengopt = document.createElement("option");
//为option省节点添加文本
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("value")));
//为option省节点设置属性
shengopt.setAttribute("value", provinces[i].getAttribute("value"));
//添加省到页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange = function () {
//获取省节点所有的option对象的集合
var shengs = sheng.options;
//获取选中option对象的selectedIndex(下标值)
var num = shengs.selectedIndex;
//清空市 区
shi.length = 0;
xian.length = 0;
//根据选中的省获取其value值的内容 即xml文件中的postcode对应的值
var ppostcode = shengs[num].getAttribute("value");
//遍历所有的省
for (var i = 0; i < provinces.length; i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1-- 元素节点)
if (provinces[i].nodeType == 1) {
//根据省获取其postcode值的内容 即html文件中的value对应的值
var postcode = provinces[i].getAttribute("value");
if (postcode == ppostcode) {
//获取省节点的子节点
var cities = provinces[i].childNodes;
//清空
shi.length = 0;
//遍历所有的市
for (var i = 0; i < cities.length; i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE ---1 -- 元素节点)
if (cities[i].nodeType == 1) {
//创建一个option节点对象
var shiopt = document.createElement("option");
//为option市节点添加文本
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("value")));
//为option市节点设置属性
shiopt.setAttribute("value", cities[i].getAttribute("value"));
//添加市到页面dom对象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//当市节点发生改变时 触发事件
shi.onchange = function () {
//获取市节点所有的option对象的集合
var shis = shi.options;
//获取选中option对象的selectedIndex(下标值)
var num = shis.selectedIndex;
//根据选中的市获取其value值的内容 即xml文件中的postcode对应的值
var spostcode = shis[num].getAttribute("value");
//遍历所有的省
for (var i = 0; i < provinces.length; i++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE---1 -- 元素节点)
if (provinces[i].nodeType == 1) {
//获取省节点的子节点
var cities = provinces[i].childNodes;
//遍历所有的市
for (var j = 0; j < cities.length; j++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE ---1 -- 元素节点)
if (cities[j].nodeType == 1) {
//根据市获取其postcode值的内容 即html文件中的value对应的值
var postcode = cities[j].getAttribute("value");
if (postcode == spostcode) {
//清空
xian.length = 0;
//获取市节点的子节点
var areas = cities[j].childNodes;
//遍历所有的区(县)
for (var k = 0; k < areas.length; k++) {
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题(1是元素节点Node.ELEMENT_NODE ---1 -- 元素节点)
if (areas[k].nodeType == 1) {
//创建一个option节点对象
var xianopt = document.createElement("option");
//为option区节点添加文本
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("value")));
//为option区节点设置属性
xianopt.setAttribute("value", areas[k].getAttribute("value"));
//添加区到页面dom对象中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
