三级联动 大神来帮忙！！

Question

我对js不是很熟悉， 现在要做一个  三级联动  省  市  区    大神来帮忙 讲解下 思路， 最好是代码实现JavaScript

Answer 1

联动的思路很简单，
就是change事件里发ajax请求，传参数，回调函数里根据响应更新选项
具体代码你得自己写

Answer 2

用change事件。页面加载时获取第一级  $(document).ready(function () {
            GetProject();
            $("#Project_dropdownlist").change(function () { GetStation(); GetByJquery(); GetLocationByStationAndProductLine(); GetSoftwareByProjectAndStation(); });
            $("#Station_dropdownlist").change(function () { GetByJquery(); GetLocationByStationAndProductLine(); GetSoftwareByProjectAndStation(); });
        });

Answer 3

分太低，顶一下吧
反正得用ajax才能实现，还要有数据库和json的支持

Answer 4

我知道 方法有很多种，我也大概浏览了一下，用Ajax 是一种比较好的解决方案，我需要链接数据库区操作。我们的对应数据库是上面这样的。 我就是没思路怎么去做。

Answer 5

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选中值'

Answer 6

大体思路和你说的差不多。只不过，我是根据id查的，省：后四位是0前两位可变    市：后两位是0省固定中间两位可变    区：前四位固定，后两位可变。 这样来查询sql
其他的和你所得大体相同

Answer 7

现在我，在前台已经获取到了市的list1，那么我怎么能让市的select下拉框，应用这个list1啊，

Answer 8

        function GetFactory() {            $("#ddlFactory").empty(); //清空工厂SELECT控件            $.ajax({
                type: "POST",
                url: "/RepairQuery/GetAllFactoryList/",
                async: false,
                success: function (data) {                    $.each(data, function (i, item) {
                            $("<option></option>")
                            .val(item.Value)
                            .text(item.Text)
                            .appendTo($("#ddlFactory"));
                    });
                }
            });
        }

Answer 9

 <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;
                        }
                    }
                }
            }
        }
    }
}

Answer 10

xml比较大，贴不上来~~  留个邮箱吧

Answer 11

我已经实现了，用josn实现的。   但是我还是想看看你的  想法，谢谢。
[email protected]