js省市联动(适合小白)

Posted 2021-01-15 jonlyzhang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js省市联动(适合小白)相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        var shengarr = ["湖北省", "湖南省", "广东省"];
        var city = [["武汉", "荆州", "仙桃", "恩施"], ["长沙", "湘潭", "岳阳", "韶山"], ["东莞", "广州", "佛山", "汕头"]];
        window.onload=function insertfun() {
            var vsheng = document.getElementById("sheng");
            for (var i = 0; i < shengarr.length; i++) {
                var opp = document.createElement("option");
                opp.innerHTML = shengarr[i];
                opp.value = i; 
                vsheng.appendChild(opp);
            }
            insertcityfun();
        }
        function insertcityfun() {
            var id = document.getElementById("sheng").value;
            var vshi = document.getElementById("shi");
            vshi.options.length = 0;
            var cityarr = city[parseInt(id)];
            for (var i = 0; i < cityarr.length; i++) {
                var cpp = document.createElement("option");
                cpp.innerHTML = cityarr[i];
                cpp.value = i;
                vshi.appendChild(cpp);
            }
        }
    </script>
</head>
<body>
    <!--省市联动-->
    <select id="sheng" onchange="insertcityfun()">
    </select>
    <select id="shi"></select>
</body>
</html>

以上是关于js省市联动(适合小白)的主要内容，如果未能解决你的问题，请参考以下文章

c# 求WPF省市区三级联动代码，是从xml中得到省市区数据后添加到三个下拉列表。

js之select标签---省市联动小例子