JS省市联动

最新推荐文章于 2024-07-19 15:34:53 发布

菜鸟程序员也有梦想

最新推荐文章于 2024-07-19 15:34:53 发布

阅读量799

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/u013977285/article/details/70236605

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        省
        <select id="sheng" onchange="selected(this)">
            <option>---请选择---</option>
        </select>
        市
        <select id="shi">
            <option>---请选择---</option>
        </select>
    </body>

</html>

Javascript

        <script type="text/javascript">
            var map = new Array();
            map["河北"] = ["石家庄", "张家口", "承德", "邯郸", "保定"];
            map["河南"] = ["郑州", "开封", "洛阳", "南阳", "新乡", "平顶山"];
            map["山西"] = ["太原", "大同", "晋中", "运城", "吕梁", "长治"];
            map["山东"] = ["济南", "青岛", "威海", "菏泽", "淄博", "日照"];

            function init() {
                var sel = document.getElementById("sheng");
                for(var m in map) {
                    var op = new Option(m, m);
                    sel.appendChild(op);
                }
            }

            function selected(v) {
                var shi = map[v.value];
                //删除已有的option
                document.getElementById("shi").length = 1;
                for(var i = 0; i < shi.length; i++) {
                    var op = new Option(shi[i], shi[i]);
                     document.getElementById("shi").appendChild(op);

                }
            }
            onload = init;
        </script>