select下拉菜单二级联动

快乐打工仔 分类:实例代码

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

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

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.pipipi.net/" />
<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值是和数组中子数组城市索引关联。

(9).for(var index = 0;index < len.length; index++){

  opt = opt + '<option value ="'+ index +'">  '+ len[index]+ '</option>'

},遍历子数组中的每一个城市或者区,连接成option字符串。

(10).city.innerHTML = opt,设置option项。

(11).province.onchange = function(){

  choose();

},注册onchange事件处理函数。

(12).choose(),为了显示默认省份和城市或者区。

二.相关阅读:

(1).二维数组参阅 JavaScript 二维数组 一章节。

(2).onchange 事件参阅 JavaScript change 事件 一章节。

(3).innerHTML 属性参阅 JavaScript innerHTML 一章节。

回复

我来回复
  • 暂无回复内容