(day04-1) 二级联动列表

最新推荐文章于 2022-11-26 15:21:34 发布

原创最新推荐文章于 2022-11-26 15:21:34 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#二级联动列表 #DOM

DOM 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的二级联动下拉列表，通过预定义的省份和城市数据，当用户选择省份时，能自动更新显示对应的城市列表。

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


<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
	.hide{ display: none; }
</style>


</head>
<body>
	<select name="provs">
		<option>—请选择—</option><!--0-->
		<option>北京市</option><!--1-->
		<option>天津市</option><!--2-->
		<option>河北省</option><!--3-->
  </select>
  
	<select name="cities" class="hide">
	</select>
  <script>
	/*实现“省”和“市”的级联下拉列表*/
	var cities=[//二维数组划分
      //[0]  北京市
      [{"name":'东城区',"value":101},
       {"name":'西城区',"value":102},
       {"name":'海淀区',"value":103},
       {"name":'朝阳区',"value":104}
      ],
      //[1]  天津市
      [{"name":'河东区',"value":201},
       {"name":'河西区',"value":202},
       {"name":'南开区',"value":203}
      ],
      //[2]  河北省
      [{"name":'石家庄市',"value":301},
       {"name":'廊坊市',"value":302},
       {"name":'保定市',"value":303},
       {"name":'唐山市',"value":304},
       {"name":'秦皇岛市',"value":305}
      ]
	];

  //1、选中省份列表中的一个省份，获得选中省份对应的子数组城市列表
    //1.查找触发事件的元素：name=”provs“
	var selProvs=
    document.getElementsByName("provs")[0];
    //先查找第二个select备用
  var selCts=
    document.getElementsByName("cities")[0];
    //2.绑定事件处理/函数
    //当selProvs的选中项改变时
    //onchange  改变事件。  不是单击事件
  selProvs.onchange=function(){
    var selProvs=this; //指定当前选中项
    //获得当前选中项的下标位置 ： selectedIndex
    var i=selProvs.selectedIndex;
    //除非选中的不是第一项：-请选择- 时，才：
    if(i>0){
      //获得当前省份 对应的城市列表的子数组
      var cts=cities[i-1];
      //2、将子数组中的城市转为option加入到第二个select中
      //因为第二个select已经在页面上隐藏着了，所以要添加多个平级option，应该先放在文档片段中
      var frag=
        document.createDocumentFragment();
      //在遍历之前，应该先添加一个<option> -请选择-。再添加城市内容
            //  var opt=document.createElement("option");
            //  opt.innerHTML="-请选择-";
            //  frag.appendChild(opt);
          frag.appendChild(
          new Option("-请选择-")
        );
        //开始遍历子数组的每个城市对象
        for(var c of cts){
          //每遍历一个城市对象，就创建一个option元素对象，并加入文档片段中，同时设置option是内容为当前城市名
            //  var opt=document.createElement("option");
            //  opt.innerHTML=c.name;
            //  frag.appendChild(opt);
            frag.appendChild(
            new Option(c.name,c.value)
          );
        }
        //将整个文档片段加入到第二个select中
        //坑：在追加新的option之前，应该先删除旧的所有option（即清空selCts的内容//或长度为0）
        //selCts.innerHTML="";
        selCts.length=0;//了解
        //再添加到文档片段的尾部
        selCts.appendChild(frag);
        //将第二个select显示出来（即清空class：“hide”）
        selCts.className="";
    }else{//若用户选择的是 -请选择-
       //要将第二个 select隐藏，恢复成开始模样
       selCts.className="hide";
    }
  }
</script>
</body>
</html>


```效果如下：
![？？？](https://img-blog.csdnimg.cn/2019050913234236.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190509132508316.png)