省市二级联动

最新推荐文章于 2020-12-18 11:20:14 发布

T 明达

最新推荐文章于 2020-12-18 11:20:14 发布

阅读量841

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44311876/article/details/89477124

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在开发一个应用的时候需要用经常用到省市联动这类下拉列表，网上找到不少。但是要么太复杂，难以修改；要么根本就用不了，最后自己写了一个小案例，然后自己写了一个，简单易懂，适合新手
联动要点：通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，。

  <html>
            <head>
                <meta charset="utf-8">
                <title>省市联动</title>
                <script>
                    var arr = [['南京','苏州','扬州'],['广州','深圳','东莞']]
                    function clickOption(){
                        var SelectSF = document.getElementById("SF");
                        var val = SelectSF.value;
                        val = val - 1;
                        //清空城市，便于第二次点击，不然会一直添加
                        var SelectCS = document.getElementById("CS");
                        SelectCS.options.length = 1;
        
                        //遍历数组，将数组中的元素添加到城市节点
                        for(var i = 0; i<arr[val].length; i++){
                            //创建节点
                            var opt = document.createElement("option");
                            //创建文本内容
                            var Text = document.createTextNode(arr[val][i]);
                            opt.appendChild(Text);
                            SelectCS.appendChild(opt);
                        }
                    }
                </script>
            </head>
            <body>
                <center>
                    <div style="width: 800px; height: 200px; border: 5px solid purple;">
                        <select id="SF" "clickOption()">
                            <option value="0">
                                --请选择--
                            </option>
                            <option value="1"> 南京 </option>
                            <option value="2">  广东  </option>
                        </select>
                        <select id="CS">
                            <option>
                                --请选择--
                            </option>
                        </select>
                    </div>
                </center>
            </body>
        </html>