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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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默认安装产生系统漏洞
2006/10/09 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
浅谈php和.net的区别
2014/09/28 PHP
php生成mysql的数据字典
2016/07/07 PHP
js 数组操作代码集锦
2009/04/28 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Django中URL的参数传递的实现
2019/08/04 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
政风行风整改方案
2014/10/25 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书