当前位置：首页 > 资讯 > 技术文档

JavaScript简单下拉菜单特效

时间：2021-11-22 20:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript简单下拉菜单特效

本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下 [b]实例1：[/b]联动的省市下拉菜单 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>

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

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：php 修改密码实现代码
下一篇：JS将滑动门改为选项卡（需鼠标点击）的实现方法

资讯排行榜
更多>>