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 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解react-redux插件入门
Apr 19 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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 UBB 解析实现代码
2011/11/27 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript 写类方式之八
2009/07/05 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue实现分页组件
2020/06/16 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
opencv实现图像几何变换
2021/03/24 Python
化工专业应届生求职信
2013/11/08 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
内业资料员岗位职责
2014/01/04 职场文书
学术会议邀请函范文
2014/01/22 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python