首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现的Select三级下拉菜单代码

Posted in Javascript onAugust 20, 2015

本文实例讲述了JS实现的Select三级下拉菜单。分享给大家供大家参考。具体如下：

这里使用js实现Select三级下拉菜单，比如全国省市城市选择、数码类产品分类、人才类别选择等，都比较具有代表性，在表单中容易使用Select下拉列表菜单供用户选择，当然，自己用还是需要稍微改动的，比如至少菜单内容要改成自己需要的，其它的好说。

运行效果如下图所示：

JS实现的Select三级下拉菜单代码

在线演示地址如下：

具体代码如下：

<html>
<head>
<title>三级下拉菜单(通用版)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function CreateSelect(_FormName,_SName,_SValue,_Ds,_AllOptionStr,ShowType)
{
 if (_FormName=="")
  _FormName = "all"
 var _DsArr = _Ds.split("|")
 var _Ds1,_Ds2,_Ds3
 var _Ds1 = _DsArr[0]
 var _Ds2 = (_DsArr.length>1)?_DsArr[1]:_DsArr[0]
 var _Ds3 = (_DsArr.length>2)?_DsArr[2]:_DsArr[0]
 var _SNameArr = _SName.split("|")
 var _SName1,_SName2,_SName3
 var _SName1 = _SNameArr[0]
 var _SName2 = (_SNameArr.length>1)?_SNameArr[1]:_SNameArr[0]
 var _SName3 = (_SNameArr.length>2)?_SNameArr[2]:_SNameArr[0]
 var _SValueArr = _SValue.split("|")
 var _SValue1,_SValue2,_SValue3
 var _SValue1 = _SValueArr[0]
 var _SValue2 = (_SValueArr.length>1)?_SValueArr[1]:_SValueArr[0]
 var _SValue3 = (_SValueArr.length>2)?_SValueArr[2]:_SValueArr[0]
 if (ShowType==3){
  _AllOptionStr = _AllOptionStr.replace(/\(\(/ig,"\(\("+_Ds3+"\^")
  _AllOptionStr = _AllOptionStr.replace(/\{\{/ig,"\{\{"+_Ds2+"\(\("+_Ds3+"\*\*")
 }
 else if(ShowType==2){
  _AllOptionStr = _AllOptionStr.replace(/\{\{/ig,"\{\{"+_Ds2+"\(\("+_Ds3+"\*\*")
 }
 else if(ShowType==1){
  _AllOptionStr = _AllOptionStr.replace(/\(\(/ig,"\(\("+_Ds3+"\^")
 }
 var AllStr = _Ds1 + "{{"+ _Ds2 + "(("+ _Ds3 +"||"+_AllOptionStr
 var _AR0 = AllStr.split("||");
 document.writeln("<select name=\"" + _SName1 + "\" size=\"1\" onChange=\""+_SName1+"redirect(this.options.selectedIndex)\">");
 for (var i1 = 0;i1 < _AR0.length;i1++)
 {
  var Area1Str = _AR0[i1];
  var _AR10 = Area1Str.split("{{");
  var _AR11 = _AR10[0].split("@");
  var Tstr1 = _AR11[0];
  var Vstr1 = (_AR11.length==2)?_AR11[1]:_AR11[0]
  document.writeln("<option value=\""+Vstr1+"\">"+Tstr1+"<\/option>");
 }
 document.writeln("<\/select>");
 document.writeln("<select name=\"" + _SName2 + "\" size=\"1\" onChange=\""+_SName1+"redirect1(this.options.selectedIndex)\">");
 var _AR111 = _Ds2.split("@");
 var Tstr11 = _AR111[0];
 var Vstr11 = (_AR111.length==2)?_AR111[1]:_AR111[0];
 document.writeln("<option value=\""+Vstr11+"\">"+Tstr11+"<\/option>");
 document.writeln("<\/select>");
 document.writeln("<select name=\"" + _SName3 + "\" size=\"1\">");
 var _AR222 = _Ds3.split("@");
 var Tstr22 = _AR222[0];
 var Vstr22 = (_AR222.length==2)?_AR222[1]:_AR222[0];
 document.writeln("<option value=\""+Vstr22+"\">"+Tstr22+"<\/option>");
 document.writeln("<\/select>");
 document.writeln("<S"+"CRIPT LANGUAGE=\"JavaScript\" defer>");
 document.writeln("<!--");
 document.writeln("var "+_SName1+"NewAllStr = \""+ AllStr +"\"");
 document.writeln("var "+_SName1+"_AR0 = "+_SName1+"NewAllStr.split(\"||\");");
 document.writeln("var "+_SName1+"groups=document."+ _FormName +"." + _SName1 + ".options.length;");
 document.writeln("var "+_SName1+"group=new Array("+_SName1+"groups)");
 document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
 document.writeln(" "+_SName1+"group[i]=new Array();");
 document.writeln("}");
 document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
 document.writeln(" var Area1Str = "+_SName1+"_AR0[i1];");
 document.writeln(" var _AR10 = Area1Str.split(\"{{\");");
 document.writeln(" var _AR12 = _AR10[1].split(\"**\");");
 document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
 document.writeln("  var Area2Str = _AR12[i2];");
 document.writeln("  var _AR20 = Area2Str.split(\"((\");");
 document.writeln("  var _AR211 = _AR20[0].split(\"@\");");
 document.writeln("  var Tstr2 = _AR211[0];");
 document.writeln("  var Vstr2 = (_AR211.length==2)?_AR211[1]:_AR211[0];");
 document.writeln("  "+_SName1+"group[i1][i2]=new Option(Tstr2,Vstr2);");
 document.writeln(" }");
 document.writeln("}");
 document.writeln("var "+_SName1+"temp = document."+ _FormName +"." + _SName2);
 document.writeln("function "+_SName1+"redirect(x){");
 document.writeln(" for (m="+_SName1+"temp.options.length-1;m>0;m--)");
 document.writeln(" "+_SName1+"temp.options[m]=null;");
 document.writeln(" for (i=0;i<"+_SName1+"group[x].length;i++){");
 document.writeln("  "+_SName1+"temp.options[i]=new Option("+_SName1+"group[x][i].text,"+_SName1+"group[x][i].value);");
 document.writeln(" }");
 document.writeln(" "+_SName1+"temp.options[0].selected=true");
 document.writeln(" "+_SName1+"redirect1(0)");
 document.writeln("}");
 document.writeln("var "+_SName1+"Group2s=document."+ _FormName +"." + _SName2 + ".options.length;");
 document.writeln("var "+_SName1+"Group2=new Array("+_SName1+"groups);");
 document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
 document.writeln(" "+_SName1+"Group2[i]=new Array("+_SName1+"group[i].length)");
 document.writeln(" for (j=0; j<"+_SName1+"group[i].length; j++){");
 document.writeln("  "+_SName1+"Group2[i][j]=new Array()");
 document.writeln(" }");
 document.writeln("}");
 document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
 document.writeln(" var Area1Str = "+_SName1+"_AR0[i1]");
 document.writeln(" var _AR10 = Area1Str.split(\"{{\");");
 document.writeln(" var _AR12 = _AR10[1].split(\"**\");");
 document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
 document.writeln("  var Area2Str = _AR12[i2]");
 document.writeln("  var _AR20 = Area2Str.split(\"((\");");
 document.writeln("  _AR212 = _AR20[1].split(\"^\");");
 document.writeln("  for (var i3 = 0;i3 < _AR212.length;i3++){");
 document.writeln("   Area3Str = _AR212[i3]");
 document.writeln("   _AR3 = Area3Str.split(\"@\");");
 document.writeln("   Tstr3 = _AR3[0]");
 document.writeln("   Vstr3 = (_AR3.length==2)?_AR3[1]:_AR3[0]");
 document.writeln("   "+_SName1+"Group2[i1][i2][i3]=new Option(Tstr3,Vstr3);");
 document.writeln("  }");
 document.writeln(" }");
 document.writeln("}");
 document.writeln("var "+_SName1+"temp1=document."+ _FormName +"." + _SName3 + "");
 document.writeln("function "+_SName1+"redirect1(y){");
 document.writeln(" for (m="+_SName1+"temp1.options.length-1;m>0;m--)");
 document.writeln(" "+_SName1+"temp1.options[m]=null");
 document.writeln(" for (i=0;i<"+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y].length;i++){");
 document.writeln("  "+_SName1+"temp1.options[i]=new Option("+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].text," + _SName1 + "Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].value)");
 document.writeln(" }");
 document.writeln(" "+_SName1+"temp1.options[0].selected=true");
 document.writeln("}");
 document.writeln("\/\/-->");
 document.writeln("<\/script>");
 document.writeln("<s"+"cript language=\"JavaScript\">");
 document.writeln("<!--");
 document.writeln("function "+_SName1+"SetValue(){");
 document.writeln(" try{");
 document.writeln("  if (\""+_SValue1+"\"!=\"\"){");
 document.writeln("   document."+ _FormName +"."+_SName1+".value=\""+_SValue1+"\"");
 document.writeln("   "+_SName1+"redirect(document."+ _FormName +"."+_SName1+".options.selectedIndex);");
 document.writeln("   if (\""+_SValue2+"\"!=\"\"){");
 document.writeln("    document."+ _FormName +"."+_SName2+".value=\""+_SValue2+"\"");
 document.writeln("    "+_SName1+"redirect1(document."+ _FormName +"."+_SName2+".options.selectedIndex)");
 document.writeln("    if (\""+_SValue3+"\"!=\"\")");
 document.writeln("     document."+ _FormName +"."+_SName3+".value=\""+_SValue3+"\"");
 document.writeln("   }");
 document.writeln("  }");
 document.writeln(" }");
 document.writeln(" catch(e){");
 document.writeln(" }");
 document.writeln("}");
 document.writeln("window.attachEvent(\"onload\","+_SName1+"SetValue)");
 document.writeln("\/\/-->");
 document.writeln("<\/script>");
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var AllStr1 = ""
+"东北地区{{"
 +"黑龙江((哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭"
 +"**吉林((长春^吉林^四平^辽源^通化^白山^松原^白城^延边"
 +"**辽宁((沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛"
+"||华北地区{{"
 +"北京((东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆"
 +"**天津((和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县"
 +"**山东((济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽"
 +"**河北((石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水"
 +"**河南((郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源"
 +"**山西((太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城"
 +"**内蒙古((呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟"
+"||华中地区{{"
 +"湖北((武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州"
 +"**湖南((长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界"
+"||华南地区{{"
 +"广东((广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮"
 +"**广西((南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池"
 +"**福建((福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德"
 +"**海南((海口^三亚"
+"||西南地区{{"
 +"四川((成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州"
 +"**重庆((万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川"
 +"**贵州((贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南"
 +"**云南((昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧"
 +"**西藏((拉萨^日喀则^山南^林芝^昌都^阿里^那曲"
+"||西北地区{{"
 +"陕西((西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛"
 +"**甘肃((兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南"
 +"**宁夏((银川^石嘴山^吴忠^固原"
 +"**青海((西宁^海东^海南^海北^黄南^玉树^果洛^海西"
 +"**新疆((乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏"
+"||华东地区{{"
 +"上海((黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明"
 +"**江苏((南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安"
 +"**浙江((杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水"
 +"**安徽((合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州"
 +"**江西((南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶"
+"||港澳台地区{{"
 +"香港((香港"
 +"**澳门((澳门"
 +"**台湾((台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖"
+"||其它地区{{"
 +"其它((其它"
</SCRIPT>
<FORM name="HwForm">
<HR>选择一次<br>
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("","S_13|S_23|S_33","","请选择地区@|请选择省份@|请选择城市@",AllStr1,0);
</SCRIPT>
<HR>选择三次<br>
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_1|S_2|S_3","华北地区|山东|济宁","请选择地区@|请选择省份@|请选择城市@",AllStr1,3);
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
var AllStr2 = ""
+"笔记本{{"
 +"IBM((R32^T40^T42"
 +"**DELL((N600^M600"
+"||数码相机{{"
 +"CANON((A75^A80^A85"
 +"**SONY((S80^S60"
</SCRIPT>
<HR>选择二次<br><SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_11|S_21|S_31","笔记本|IBM|T42","请选择分类@|请选择品牌@|请选择系列@",AllStr2,2);
</SCRIPT>
<HR>选择二次<br><SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_12|S_22|S_32","","请选择分类@|请选择品牌@|请选择系列@",AllStr2,1);
</SCRIPT>
</FORM>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现的Select三级下拉菜单代码

- Author -

佚名

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
js实现搜索栏效果
Nov 16 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
JS Html转义和反转义（html编码和解码）的实现与使用方法总结
Mar 10 Javascript
vue实现放大镜效果
Sep 17 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
i7 6700(1) R71E(1) React(6) win10(43) i5 9400(1) R72E(1) ICOM(2) win11(40) GTX1660(1) 对讲机(1)
You might like
php array_map()数组函数使用说明
2011/07/12 PHP
浅析PHP绘图技术
2013/07/03 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
javascript 事件绑定问题
2011/01/01 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python3简单实现微信爬虫
2015/04/09 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python argparse模块应用实例解析
2019/11/15 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
全球最大的游戏市场：G2A
2018/07/05 全球购物
伦敦香水公司：The London Perfume Company
2019/11/13 全球购物
公司培训欢迎词
2014/01/10 职场文书
会务接待方案
2014/02/27 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
培训协议书范本
2014/04/22 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
写景作文评语集锦
2014/12/25 职场文书
离婚案件被告代理词
2015/05/23 职场文书
繁星春水读书笔记
2015/06/30 职场文书
新人入职感言
2015/07/31 职场文书
大学体育课感想
2015/08/10 职场文书