关于JavaScript的二级联动菜单

<!-- js代码 -->
<script language="JavaScript" type="text/javascript">

    var city = {
        bj: ["昌平区", "海淀区", "朝阳区"],
        sh: ["浦东区", "浦西区", "闵行区"],
        zz: ["二七区", "中原区", "金水区"]
    };
   function updateCQ(){

​ // 清空原有数据
​ document.getElementById(“qu”).innerHTML =" " ;

  //  获取选中的option 的value
  
   var selectCity = document.getElementById("city");

  var selectedValue = selectCity.value;

 通过选中value 获取城区数据

var cqs =city[selectedValue];

遍历城区数组

for(var i= 0 ; i<cqs.length;i++){

//遍历过程中 城区封装节点 文本节点 option

//创建文本节点

var opTextNode = document.createTextNode(cqs[i]);

//创建option标签对象

var opNode =document.createElement("option");

//将文本放入option标签中

opNode.appendChild(opTextNode);

//将option放入城区select城区中

var qu = document.getElementById("qu");

qu.appendChild(opNode);

   }

}
   function upBei(){
        updateCQ();
    }
</script>

城市:

<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zz">郑州</option>

城区:
<select name=“qu” id=“qu”
/select>

猜你喜欢

转载自blog.csdn.net/JiangLi_/article/details/90711150