js实现三级联动

js实现省市区（县）三级联动

实现思路：根据上级，带出下级所有信息。即：前面确定，后面跟着确定。

HTML部分：

    省<select name="" id="sheng">
        <option>---请选择所在省---</option>
      </select>
    
    市<select name="" id="shi">
        <option>---请选择所在市---</option>
      </select>
    
    区<select name="" id="qu">
        <option>---请选择所在区---</option>
      </select>

JS部分：

 <script>
        var shengList = [
            {
                name:"山东省",
                shi:[
                       {
                           name:"烟台市",
                           qu:["芝罘区","莱山区","高新区"]
                       },
                      {
                           name:"威海市",
                           qu:["环翠区","文登区","高新技术产业开发区"]
                      },
                    {
                        name:"济南市",
                        qu:["历下区","市中区","天桥区"]
                    }
                    ]
            },{
                  name:"陕西省",
                  shi:[
                      {
                          name:"西安市",
                          qu:["新城区","灞桥区","未央区"]
                      },
                      {
                          name:"渭南市",
                          qu:["临渭区","华州区","经开区"]
                      },{
                          name:"咸阳市",
                          qu:["秦都区","杨凌区","渭城区"]
                      }
                  ]
            },{
                name:"河北省",
                shi:[
                    {
                        name:"邯郸市",
                        qu:["邯山区","丛台区","永年区"]
                    },{
                        name:"廊坊市",
                        qu:["安次区","广阳区","香河县"]
                    },{
                        name:"沧州市",
                        qu:["新华区","运河区","开发区"]
                    }
                ]
           }
        ]

        //查找节点  通过id获取
        var sheng = document.getElementById("sheng")
        for ( var i = 0; i < shengList.length; i++ ) {
            //创建节点
            var shengOption = document.createElement("option")
            //追加内容  可以解析标签
            shengOption.innerHTML = shengList[i].name
            shengOption.value = i
            sheng.appendChild(shengOption)
        }

        sheng.onchange = function () {
            var shiList = shengList[this.value].shi

            var shi = document.getElementById("shi")
            shi.innerHTML = "<option>===请选择===</option>"

            var qu = document.getElementById("qu")
            qu.innerHTML = "<option>===请选择===</option>"

            for ( var i = 0; i < shiList.length; i++ ) {
                var shiOption = document.createElement("option")
                shiOption.innerHTML = shiList[i].name
                shiOption.value = i
                shi.appendChild(shiOption)
            }

        }

        var shi = document.getElementById("shi")
        shi.onchange = function () {
            //省下标
            var shengIndex = document.getElementById("sheng").value
            var shiIndex = this.value
            var quList = shengList[shengIndex].shi[shiIndex].qu

            var qu = document.getElementById("qu")
            qu.innerHTML = "<option>===请选择===</option>"
            for ( var i = 0; i<quList.length; i++ ) {
                var quOption = document.createElement("option")
                quOption.innerHTML = quList[i]
                qu.appendChild(quOption)
            }
        }
  </script>