前端开发之js基础(3)-CSDN博客

本文链接：https://blog.csdn.net/DHRMM999/article/details/82290208

js实现京东配送区域列表选择

html代码

<body>
        <div id="main">
            <select id="selectparent" onchange="run(this.value)">
                <option>请选择</option>
                <option value="北京">北京</option>
                <option value="成都">成都</option>
                <option value="河北">河北</option>
                <option value="日本">日本</option>
            </select>
            <select id="selectchild">
            </select>
        </div>
    </body>

js代码

<script type="text/javascript">
        var arr = [];
        arr[0] = new Array("北京","海定区","朝阳区","昌平区","顺义区","大兴区","东城区","西城区");
        arr[1] = new Array("成都","高新区","武侯区","郫都区","青羊区","金牛区","温江区","双流区");
        arr[2] = new Array("河北","石家庄","保定","邯郸","衡水","张家口","唐山","秦皇岛");
        arr[3] = new Array("日本","大阪","东京","神户","长崎","广岛");

        function run(val){
            //获取子节点
            var child = document.getElementById("selectchild");
            var options = child.getElementsByTagName("option");
            //每次选择时清除上次的所有子节点
            for(var i=0;i<options.length;i++){
                child.removeChild(options[i]);
                i--;
            }
            //遍历数组
            for(var j=0;j<arr.length;j++){
                var a = arr[j];
                var b = a[0];
                if(b==val){
                    for(var k=1;k<a.length;k++){
                        var str = a[k];
                        //创建文本节点和标签节点
                        var textchild = document.createTextNode(str);
                        var optionchild = document.createElement("option");
                        //把文本添加到标签内
                        optionchild.appendChild(textchild);
                        child.appendChild(optionchild);
                    }
                }
            }
        }
    </script>