脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js下拉菜单特效

JavaScript简单下拉菜单特效

 更新时间：2016年09月13日 14:56:46   作者：gemingzhu  
这篇文章主要为大家详细介绍了JavaScript简单下拉菜单特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下

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

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

您可能感兴趣的文章:

相关文章

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    这篇文章主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 小程序canvas手写签名适配PC实现示例详解

    小程序canvas手写签名适配PC实现示例详解

    这篇文章主要为大家介绍了小程序canvas手写签名适配PC实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • javascript 闭包疑问

    javascript 闭包疑问

    今天在编码时，遇到一个问题，特记录下。希望对朋友有所帮助。
    2010-12-12
  • 关于promise和async用法以及区别详解

    关于promise和async用法以及区别详解

    Promise是一个构造函数,我们就可以new Promise()得到一个 Promise的实例,下面这篇文章主要给大家介绍了关于promise和async用法以及区别的相关资料,需要的朋友可以参考下
    2023-01-01
  • 微信小程序后端实现授权登录

    微信小程序后端实现授权登录

    这篇文章主要介绍了微信小程序后端实现授权登录,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JS实现图片放大缩小的方法

    JS实现图片放大缩小的方法

    这篇文章主要介绍了JS实现图片放大缩小的方法,结合实例形式分析了javascript动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2017-02-02
  • 基于MVC方式实现三级联动(JavaScript)

    基于MVC方式实现三级联动(JavaScript)

    这篇文章主要为大家详细介绍了基于MVC方式实现三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • nuxt中使用路由守卫的方法步骤

    nuxt中使用路由守卫的方法步骤

    这篇文章主要介绍了nuxt中使用路由守卫的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 微信小程序中使用echarts方法(全网最详细教程!)

    微信小程序中使用echarts方法(全网最详细教程!)

    现在越来越多的项目都在使用可视化的功能,那么使用echarts实现是一种不错的选择,下面这篇文章主要给大家介绍了关于小程序中使用echarts的方法,本文介绍的方法应该是全网最详细教程,需要的朋友可以参考下
    2023-06-06
  • JavaScript之map reduce_动力节点Java学院整理

    JavaScript之map reduce_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript之map reduce的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论