jQuery实现省市级联

1.首先在body页面中定义好对应的select多选菜单并且定义对应的id便于选择器选择
在selelct下option中给与value定义参照值便于之后的循环迭代。

<body>
省份:<select id="provence">
    <option value="0" name="provence">--请选择--</option>
    <option value="1" name="provence">河南省</option>
    <option value="2" name="provence">安徽省</option>
    <option value="3" name="provence">江苏省</option>
    <option value="4" name="provence">河北省</option>
    <option value="5" name="provence">湖南省</option>
</select>
城市:<select id="city">
    <option value="0" name="city">--请选择--</option>
</select>
</body>

2.定义一个二维数组用来装城市的集合。并通过基本选择器找到对应的标签元素,拿到对应标签元素后通过之前定义的value值作为参照迭代出对应的二维数组的城市内容。(期间一定要记得每次迭代前清空一次市级中的内容,防止内容叠加)

 $(function () {//入口函数
        //获得城市对象的下拉框
        var $city = $("#city");
        //  创建二维数组来表示城市,注意对应关系
        var citys = [
            ["--请选择--"],
            ["商丘市", "鹿邑县", "许昌市", "开封市", "郑州市"],
            ["合肥市", "淮南市", "马鞍山市", "六安市", "亳州市"],
            ["南京市", "苏州市", "扬州市"],
            ["沧州市", "泊头市", "天津市"],
            ["长沙市", "岳阳市", "衡阳市","株洲市","邵阳市"]
        ];

  $("#provence").change(function () {
            console.log($city.get(0));
            $city.get(0).length = 0;
            var val = this.value;
            console.log(val);
            $.each(citys, function (i, n) {//代表二维数组的下标,代表二维数组中更具体的内容
                if (val == i) { //判断
                    $(n).each(function (j, m) {//j代表每个二维数组中一维数组内容的下表,m代表一维数组的内容
                        //创建对象,并且添加到城市下拉框中
                        $city.append("<option name='city'>" + m + "</option>")
                    });
                }
            });
        });
    });

推荐阅读更多精彩内容