select下拉菜单二级联动

2023-12-04 13:49:49 前端笔记 186

二级联动效果大家可能都比较熟悉，比如省市二级联动效果。

从它的使用频度就可以看出它的重要性，下面就通过代码实例详细介绍一下它的实现过程。

代码实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<script>
window.onload=function(){
  var province = document.getElementById("province");
  var city = document.getElementById("city");
  var area = [['朝阳','海淀'],['杭州','海宁']];
  function choose(){
    var opt = "";
    if(province.value==undefined){
      province.value=0;
    }
    var len = area[province.value];  
    for(var index = 0;index < len.length; index++){ 
      opt = opt + '<option value ="'+ index +'">  '+ len[index]+ '</option>'
    }
    city.innerHTML = opt;
  }
  province.onchange = function(){
    choose();
  }
  choose();
}
</script>
</head>
<body>
<select id="province">
  <option value="0">北京</option>
  <option value="1">浙江</option>
</select>
<select id="city">
</select>
</body>
</html>

上面的代码实现了联动效果，只是做了精简而已，下面就介绍一下它的实现过程。

一.代码注释:

（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。

（2）.var province = document.getElementById("province")，获取省份select下拉菜单。

（3）.var city = document.getElementById("city")，获取城市select下拉菜单。

（4）.var area = [['朝阳','海淀'],['杭州','海宁']]，一个模拟的二维数组，存放的是城市或者区。

（5）.function choose(){}，作为onchange事件处理函数。

（6）.var opt = ""，此变量用来存储option项相关字符串。

（7）.if(province.value==undefined){

province.value=0;

}，如果属性值等于undefined，也就是在默认状态会显示第一个子数组中城市或者区。

（8）.var len = area[province.value]，显示指定的子数组，城市select下拉菜单的value值是和数组中子数组城市索引关联。