JavaScript简单下拉菜单特效


Posted in Javascript onSeptember 13, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JS前端模块化原理与实现方法详解
Mar 17 Javascript
javascript特殊文本输入框网页特效
Sep 13 #Javascript
浅谈JS之iframe中的窗口
Sep 13 #Javascript
JS给swf传参数的实现方法
Sep 13 #Javascript
JS之相等操作符详解
Sep 13 #Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 #Javascript
jQuery异步提交表单的两种方式
Sep 13 #Javascript
浅谈JS之tagNaem和nodeName
Sep 13 #Javascript
You might like
用Zend Encode编写开发PHP程序
2006/10/09 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
8个PHP数组面试题
2015/06/23 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
Python常见数据结构详解
2014/07/24 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
毕业生自荐书
2014/02/02 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
刑事起诉书范文
2015/05/19 职场文书
校园安全学习心得体会
2016/01/18 职场文书