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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
python3.5 tkinter实现页面跳转
2018/01/30 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
益模软件Java笔试题
2012/03/27 面试题
早会主持词
2014/03/17 职场文书
2014年文员工作总结
2014/11/18 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
外出听课学习心得体会
2016/01/15 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
PHP中->和=>的意思
2021/03/31 PHP
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python