Dom操作实现二级联动下拉选择省份

<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>.hide{ display: none; }</style>
<script>
   /*实现“省”和“市”的级联下拉列表*/
   var cities=[[],       /*0号下标没有元素*/
[{"name":'东城区',"value":101},
 {"name":'西城区',"value":102},
 {"name":'海淀区',"value":103},
 {"name":'朝阳区',"value":104}],
[{"name":'河东区',"value":201},
 {"name":'河西区',"value":202},
 {"name":'南开区',"value":303}],
[{"name":'石家庄市',"value":301},
 {"name":'廊坊市',"value":302},
 {"name":'保定市',"value":303},
 {"name":'唐山市',"value":304},
 {"name":'秦皇岛市',"value":305}]
         ];
   function loadCities(i){
      var selection=document.querySelector("[name='cities']");
      selection.className='hide'
      if(i!=0){
         //设置节点片段来存储新增的option节点
         var frag=document.createDocumentFragment();
         //首先清空cities下的option以及设置其的className="hide"
         selection.innerHTML="";
         //遍历cities[i]数组对象
         for(var n=0;n<cities[i].length;n++){
            //创建option来存储遍历的对象的name和value
            var option=document.createElement("option");
            option.innerHTML=cities[i][n].name;
            option.value=cities[i][n].value;
            // 将创建的option存储到节点片段中
            frag.appendChild(option)
         }
         //遍历完了之后将节点片段追加到cities下
         selection.appendChild(frag);
         //将cities下拉列表的class属性只换成show，让其显示出来
         selection.className=''
      }
   }
</script>

</head>
<body>
   <select name="provs" 
      onchange="loadCities(this.selectedIndex)">
      <option>—请选择—</option>
      <option>北京市</option>
      <option>天津市</option>
      <option>河北省</option>
   </select>
   
   <select name="cities" class="hide"></select>
</body>
</html>
Dom操作实现二级联动下拉选择省份

猜你喜欢
