关于JavaScript的二级联动菜单

最新推荐文章于 2022-02-13 18:31:03 发布

JiangLi_

最新推荐文章于 2022-02-13 18:31:03 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/JiangLi_/article/details/90711150

前端技术专栏收录该内容

11 篇文章

订阅专栏

博客展示了一段JavaScript代码，用于清空指定元素的数据。代码通过document.getElementById获取元素，并将其innerHTML属性置为空字符串，实现清空操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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