js级联菜单

最新推荐文章于 2023-11-05 20:49:09 发布

姬姬姬姬姬姬

最新推荐文章于 2023-11-05 20:49:09 发布

阅读量72

点赞数 1

分类专栏： jQUery 文章标签： javascript webview elementui

本文链接：https://blog.csdn.net/m0_51491785/article/details/121731179

版权

jQUery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>
<select id="country">
  <option>国家</option>
</select>
<select id="city">
  <option>城市</option>
</select>
<script>

  var country = ['中国', '美国','英国']
  var city = [
    ['北京', '上海'],
    ['纽约'],
    ['伦敦']
  ]

  var cou = document.getElementById("country");
  var cit = document.getElementById("city");
  //初始化国家下拉列表
  for(var i = 0; i < country.length; i++) {
    //新的option
    var option = new Option()
    //赋值
    option.appendChild(document.createTextNode(country[i]))
    //插入
    cou.appendChild(option)
  }
  //为国家下拉列表添加事件
  cou.addEventListener('change', function(){
    //另城市列表变为初始状态，可以注释掉查看效果
    cit.options.length = 1;
    //如果国家选择不为默认值
    if(cou.selectedIndex != 0) {
      //遍历相应国家的城市
      for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {
        var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j])
        cit.options.add(option2)
      }
    }
  });
</script>
</body>
</html>

姬姬姬姬姬姬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js级联菜单

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><select id="country"> <option>国家</option></select><select id="city"> <option&gt.
复制链接

扫一扫