JavaScript二级联动

最新推荐文章于 2024-03-27 23:32:00 发布

叁拾-

最新推荐文章于 2024-03-27 23:32:00 发布

阅读量1.3k

点赞数 2

分类专栏： js 前端

本文链接：https://blog.csdn.net/baidu_38845827/article/details/90376935

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

参考网上很好的例子按照自己的想法写了一个很简单的二级联动

<body>

    <div>
        <select id="province" style="width:150px"></select>
        <select id="city" style="width:150px"></select><br />
    </div> 

<script src="jquery/jquery-3.0.0.js"></script>
    <script>
        var peov_list = ['内蒙古自治区', '新疆维吾尔自治区', '北京市', '湖南省', '广东省', '河南省'];

        var city_list = [];
        city_list[0] = ['呼和浩特市', '集宁', '海拉尔', '锡林浩特市', '赤峰市', '鄂尔多斯市', '二连浩特市', '五路珠穆沁旗'];
        city_list[1] = ['天山', '喀什', '哈密', '乌鲁木齐', '哈姆'];
        city_list[2] = ['北京市'];
        city_list[3] = ['长沙市', '湘潭市', '宁乡', '岳阳市', '衡阳市', '常德市'];
        city_list[4] = ['广州市', '珠海市', '佛山市', '深圳市'];
        city_list[5] = ['洛阳', '郑州', '驻马店', '漯河'];
        $(function () {
            abc();

            $("#province").change(function () { adad($("#province option:selected").val()) });
        });
        function abc() {
            var prov_select = $("#province");

            //给省下拉框添加数据
            for (var i = 0; i < peov_list.length; i++) {
                prov_select[0].add(new Option(peov_list[i], i));
            }
            adad(0);
        }

        function adad(index) {
            var citys = city_list[index];

            $("#city").empty();

            for (var i = 0; i < citys.length; i++) {
                $("#city")[0].add(new Option(citys[i], i));
            }
        }
    </script>

</body>

叁拾-

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript二级联动

参考网上很好的例子按照自己的想法写了一个很简单的二级联动<body> <div> <select id="province" style="width:150px"></select> <select id="city" style="width:150px"></select&gt...
复制链接

扫一扫