三十九、Jquery三级联动dome

说明：和js的三级联动dome写法一致，只是用jquery语法；

另外数据这次采用json数据格式做示范；

注意：json数据中同级关系的名称一致，方便后面的访问，子父级关系的名称可以一致也可以不一致；

另外，还需要处理选择请选择时的bug(设置默认value=””,当获取的value值为空时，跳出当前程序)

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省：
<select id="provice">
    <option value="">--请选择--</option>
</select>
市：
<select id="city">
    <option value="">--请选择--</option>
</select>
区：
<select id="qu">
    <option value="">--请选择--</option>
</select>

<script src="js/jquery-3.0.0.js"></script>
<script>
    //构建数据
    var city=[
        {
            "provicename":"陕西省",
            "proviceChild":[
                {
                    "cityname":"西安市",
                    "cityChild":[
                        {"quname":"莲湖区"},
                        {"quname":"长安区"},
                        {"quname":"未央区"},
                        {"quname":"高新区"},
                        {"quname":"雁塔区"}
                    ]
                },
                {
                    "cityname":"宝鸡市",
                    "cityChild":[
                        {"quname":"金台区"},
                        {"quname":"成仓区"},
                        {"quname":"高新区"},
                        {"quname":"渭滨区"}
                    ]
                },
                {
                    "cityname":"咸阳市",
                    "cityChild":[
                        {"quname":"咸阳市1"},
                        {"quname":"咸阳市2"},
                        {"quname":"咸阳市3"},
                        {"quname":"咸阳市4"}
                    ]
                },
                {
                    "cityname":"延安市",
                    "cityChild":[
                        {"quname":"延安市1"},
                        {"quname":"延安市2"},
                        {"quname":"延安市3"},
                        {"quname":"延安市4"}
                    ]
                },
                {
                    "cityname":"汉中市",
                    "cityChild":[
                        {"quname":"汉中市1"},
                        {"quname":"汉中市2"},
                        {"quname":"汉中市3"},
                        {"quname":"汉中市4"}
                    ]
                }
            ]
        },
        {
            "provicename":"四川省",
            "proviceChild":[]
        }
    ];

    //省级
    for(var i=0;i<city.length;i++){
        var option=$("<option></option>");
        option.val(i);
        option.html(city[i].provicename);
        $("#provice").append(option);
    }

    //市级 利用省级文本改变事件
    var cityindex=0;//用来标记市
    $("#provice").change(function(){
        //每次改变 清除市、区内容
        $("#city option:gt(0)").remove();
        $("#qu option:gt(0)").remove();

        var index=$(this).val();
        //这里得处理点击请选择的bug
        if(index=="")return;

        cityindex=city[index].proviceChild;

        for(var i=0;i<city[index].proviceChild.length;i++){
            var option=$("<option></option>");
            option.val(i);
            option.html(city[index].proviceChild[i].cityname);
            $("#city").append(option);
        }
    });

    //区级 利用市级文本改变事件
    $("#city").change(function(){
        //每次改变 移除区内容
        $("#qu option:gt(0)").remove();

        var index=$(this).val();
        if(index=="")return;

        for(var i=0;i<cityindex[index].cityChild.length;i++){
            var option=$("<option></option>");
            option.val(i);
            option.html(cityindex[index].cityChild[i].quname);
            $("#qu").append(option);
        }
    });
</script>
</body>
</html>

三十九、Jquery三级联动dome

猜你喜欢