本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月30日
2024年09月30日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】