zoukankan      html  css  js  c++  java
  • 利用js实现省市区三级联动

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

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

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

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

    首先建立三个下拉列表框

    <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>

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

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

    得到省的下拉列表框

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

    效果图:

    市:使用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;
                }

    区:同样使用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>

     

  • 相关阅读:
    详解GaussDB(for MySQL)服务:复制策略与可用性分析
    华为云的研究成果又双叒叕被MICCAI收录了!
    充分释放数据价值:安全、可信6到飞起
    未来云原生世界的“领头羊”:容器批量计算项目Volcano 1.0版本发布
    一文带你掌握OBS的两种常见的鉴权方式
    数据库实践丨MySQL多表join分析
    技术贴丨教你使用华为云鲲鹏服务器部署Discuz!论坛
    python Scrapy 从零开始学习笔记(二)
    python Scrapy 从零开始学习笔记(一)
    从零开始学Electron笔记(七)
  • 原文地址:https://www.cnblogs.com/xuhanghang/p/10126007.html
Copyright © 2011-2022 走看看