利用js实现省市区三级联动

这里我们是将所有的省市区放在一个js文件当中，我们将他打印到打印台方便观看

第一层数组包对象的形式，通过第一层我们可以获取到省

利用js实现省市区三级联动

第二层是对象包数组，通过数组children我们可以的到市

利用js实现省市区三级联动

第三层同样也是对象包数组的形式，可以得到区

利用js实现省市区三级联动

首先建立三个下拉列表框

<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>

分别获取他们的对象

        <script>
            console.log(data)
//            通过id分别获取省市区下拉列表的对象
            var sheng=document.getElementById("sheng");
            var shi=document.getElementById("shi");
            var qu=document.getElementById("qu");

这里我们首先要区别innerHTML的属性和innertext的属性是不同的

inneHTML浏览器是可以解析整个HTML片段的；

innertext浏览器是不会解析的传入的只是文本，字符串的形式；

实例：

<body>
        <ul id="ul">
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>
        <script>
            var ul=document.getElementById("ul");
            console.log(ul.innerHTML);
            console.log(ul.innerText);
        </script>
    </body>

利用js实现省市区三级联动

省：通过循环遍历，将每一个省的name添加到建立的空字符串中

然后利用innerHTML浏览器会解析整个html片段的属性，将整个字符串添加进去。

得到省的下拉列表框

var sheng_str="";/*定义一个空字符串*/
            for(i=0;i<data.length;i++){/*将省的列表循环添加到空字符串中*/
            sheng_str+="<option>"+data[i].name+"</option>"/*字符串拼接*/
            }
            sheng.innerHTML=sheng_str;

效果图：

利用js实现省市区三级联动

市：使用onchange事件当省的下拉列表值改变时让市变化到对应的部分

  var shi_index;/*全局变量方便后面使用*/
            sheng.onchange=function(){
                qu.innerHTML="";/*清空区的下拉列表*/
                shi_index=sheng.selectedIndex;/*获取市对应的索引*/
                var shi_str="";
                var shi_data=data[shi_index].children/*存放市的数组*/
                for(i=0;i<shi_data.length;i++){
                    shi_str+="<option>"+shi_data[i].name+"</option>"
                }
                shi.innerHTML=shi_str;
            }

利用js实现省市区三级联动

区：同样使用onchange事件市发生改变时让区变化到对应的部分

shi.onchange=function(){
                var qu_index=shi.selectedIndex;/*获取区对应的索引*/
                var qu_str="";
                var qu_data=data[shi_index].children[qu_index].children;/*存放区的数组*/
                for(i=0;i<qu_data.length;i++){
                    qu_str+="<option>"+qu_data[i].name+"</option>"
                }
                qu.innerHTML=qu_str;
            }
        </script>

利用js实现省市区三级联动

秒客网

利用js实现省市区三级联动

相关文章