码迷,mamicode.com
首页 > Web开发 > 详细

js省市联动(适合小白)

时间:2018-10-27 00:19:32      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:doc   end   广州   charset   cti   title   val   document   小白   

<!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省市联动(适合小白)

标签:doc   end   广州   charset   cti   title   val   document   小白   

原文地址:https://www.cnblogs.com/JonlyZhang/p/9858835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!