省级联动jq

terry_hwt

于 2021-07-18 12:31:57 发布

阅读量133

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_55610109/article/details/118875155

版权

一、实现的简要思路：
将省和市分别在对应的select里动态地创建option，并遍历省和市的数组，将数据添加加到对应的省和市列表中。

二、详细操作步骤：
1.创建两个数组province和city，分别存储省和市的数据。(省的为一维数组，市的为二维数组)

2.加载标签的内容。加载完后，在回调函数function()中通过id选择器找到id=“pro”对应的。

3.each()遍历数组province，每遍历一次就动态创建一个空的，然后给添加上属性值value，值为下标index。再将数组province中的值追加到中，将追加到id=“pro”对应的。

4.pro.change(function (){})里的使得在点击省选项后，会弹出该省相应的市选项。下面我们要做的就是通过中的中的value值找到二维数组city中相应的一维数组市。

5.在回调函数function()中通过id选择器找到id=“cy”对应的，然后再each()遍历数组city[pro.val()]，每遍历一次就动态创建一个空的，然后给添加上属性值value，值为下标ix。再将数组city[pro.val()]中的值追加到中，将追加到id=“cy”对应的。

三、小细节
1.pro.val()不仅是数组province的下标，也是中的的value值。

2.cy.empty()这一步必须要，不然每选一次省就会在市列表上加上省对应的市，造成重复累赘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PC4</title>
    <script type="text/javascript" src="../jq/jquery-3.4.1.min.js"></script>
    <script>
        var province = ["广东省", "黑龙江省", "云南省"];
        var city = [["佛山", "东莞","汕头"], ["哈尔滨", "鸡西", "大庆"], ["昆明", "邵通"]];
        $(document).ready(function () {
            var pro = $("#pro");
            $.each(province, function (index, em) {
                var option = $("<option></option>");
                option.attr("value",index);
                option.append(em);
                pro.append(option);
            });
            pro.change(function () {
               var cy = $("#cy");
               cy.empty();
               $.each(city[pro.val()],function (ix,e) {
                   var o = $("<option></option>");
                   o.attr("value",ix);
                   o.append(e);
                   cy.append(o);
               });
            });
        });
    </script>
</head>
<body>
<select name="province" id="pro">
    <option value="-1">请选择</option>
</select>
<select name="city" id="cy">

</select>
</body>
</html>