JavaScript简单下拉菜单特效

2020-02-22 16:00:31来源：爱站网阅读 ()

JavaScript简单下拉菜单特效，相信大家觉得并不陌生，因为在我们使用的过程中都可以经常使用，下面是爱站技术频道小编带给大家的JavaScript简单下拉菜单特效，一起来学习吧！

实例1：联动的省市下拉菜单

onchange 事件会在域的内容改变时发生。

<script type="text/javascript">     
      var arr = new Array();       //数据数组
      //定义数据，结构为：id、名字、父id
      arr[arr.length] = [1, '北京市', null];
      arr[arr.length] = [2, '四川省', null];
      arr[arr.length] = [3, '广东省', null];
      arr[arr.length] = [4, '北京市', 1];
      arr[arr.length] = [5, '成都市', 2];
      arr[arr.length] = [6, '广州市', 3];
      arr[arr.length] = [7, '深圳市', 3];
      //动态设置下拉项目
      function fillOptions(type){
        if(type == 'province'){
          //获取省份下拉菜单的DOM
          var province = document.getElementById("province");
          province.innerHTML = '';    //内容先置空
          //填充省的字符
          var proStr = '<option value=""></option>';
          //遍历数组
          for(var i=0; i<arr.length; i++){
            var item = arr[i];   //当前项
            //如果没有父id，则是省份
            if(item[2] == null)
              proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          province.innerHTML = proStr;//填充新内容
        }else if(type == 'city'){
          //获取当前的省份的id
          var currProId = document.getElementById("province").value;
          if(currProId == '')
            return false;
          //获取城市下拉菜单的DOM
          var city = document.getElementById("city");
          city.innerHTML = '';      //内容先置空
          //填充市的字符
          var cityStr = '<option value=""></option>';
          //遍历数组
          for(var i=0; i<arr.length; i++){
            var item = arr[i];   //当前项
            //判断是否为当前省下的城市
            if(item[2] == currProId)
              cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          city.innerHTML = cityStr    ;//填充新内容
        }
      }
    </script>

<body style="text-align:center;" onload="fillOptions('province');">
    <!-- 定义下拉菜单 -->
    省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>
    市：<select id="city"></select><br/><br/>
  </body>

实例2：三级联动的省市县下拉菜单

<script type="text/javascript">     
      var arr = new Array();       //数据数组
      //定义数据，结构为：id、名字、父id
      arr[arr.length] = [1, '北京市', null];
      arr[arr.length] = [2, '四川省', null];
      arr[arr.length] = [3, '广东省', null];
      arr[arr.length] = [4, '北京市', 1];
      arr[arr.length] = [5, '成都市', 2];
      arr[arr.length] = [6, '广州市', 3];
      arr[arr.length] = [7, '深圳市', 3];
      arr[arr.length] = [8, '武侯区', 5];
      arr[arr.length] = [9, '青羊区', 5];
      arr[arr.length] = [10, '白云区', 6];
      arr[arr.length] = [11, '增城市', 6];
      arr[arr.length] = [12, '从化市', 6];
      //动态设置下拉项目
      function fillOptions(type){
        if(type == 'province'){
          //获取省份下拉菜单的DOM
          var province = document.getElementById("province");
          province.innerHTML = '';    //内容先置空
          //填充省的字符
          var proStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍历数组
            var item = arr[i];     //当前项
            //如果没有父id，则是省份
            if(item[2] == null)
              proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          province.innerHTML = proStr;  //填充新内容
        }else if(type == 'city'){
          //获取当前的省份的id
          var currProId = document.getElementById("province").value;
          if(currProId == '')
            return false;
          //获取城市下拉菜单的DOM
          var city = document.getElementById("city");
          city.innerHTML = '';      //内容先置空
          //填充市的字符
          var cityStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍历数组
            var item = arr[i];     //当前项
            //判断是否为当前省下的城市
            if(item[2] == currProId)
              cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          city.innerHTML = cityStr    ;//填充新内容
        }else if(type == 'area'){
          //获取当前城市的id
          var currCityId = document.getElementById("city").value;
          if(currCityId == '')
            return false;
          //获取区县下拉菜单的DOM
          var area = document.getElementById("area");
          area.innerHTML = '';      //内容先置空
          //填充区县的字符
          var areaStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍历数组
            var item = arr[i];     //当前项
            //判断是否为当前城市下的区县
            if(item[2] == currCityId)
              areaStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          area.innerHTML = areaStr;  //填充新内容
        } 
      }
</script>

<body style="text-align:center;" onload="fillOptions('province');">
    <!-- 定义下拉菜单 -->
    省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>
    市：<select id="city" onchange="fillOptions('area')"></select><br/><br/>
    县/区：<select id="area"></select><br/><br/>
</body>

看完爱站技术频道小编带给大家的JavaScript简单下拉菜单特效，相信大家已经懂了，如果大家以平常心去学习，就一定可以成为高手。

原文链接:https://js.aizhan.com/develop/JavaScript/11680.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有