省份城市联动框

Posted 平凡普通

tags:

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

document.createElement("标签名");

document.removeChild("去掉某个标签");

document.appendChild("添加标签");

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        
        function showCitys(){
            var allCity = [[],["广州","深圳"],["南宁","桂林","我不住地"]];
            var allProvice = document.getElementById("allProvice");
            //获取选择的省份
            var i = parseInt(allProvice.selectedIndex);
            //取出这个省份中的城市
            var data = allCity[i];

            //填入到
            var citys = document.getElementById("citys");
            citys.options.length = 1;
            var optionNode = document.createElement("option");
            for(var i = 0 ; i < data.length ; i++){
                var optionNode = document.createElement("option");
                optionNode.innerHTML = data[i];
                citys.appendChild(optionNode);
            }

        }


    </script>

    <title></title>
</head>
<body>
    
    省份
    <select name="" id="allProvice" onchange="showCitys()">
        <option value="">省份</option>
        <option value="">广东</option>
        <option value="">广西</option>
    </select>
    城市
    <select name="" id="citys" >
        <option>城市</option>
    </select>
    
</body>
</html>

 

以上是关于省份城市联动框的主要内容，如果未能解决你的问题，请参考以下文章

省份，城市，地区------三级联动菜单

bootstrap-select.js 怎么联动改变，例如：省份，城市二级联动。

学习aiax(javascript)--省份-城市二级下拉联动（POST方式）

2016-07-05 JavaScript实现省份城市二级联动

联动菜单

js 省份城市二级动态联动的例子