首页
所有分类
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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
提高 DHTML 页面性能
Dec 25 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 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
Pyecharts(7) FuzzyWuzzy(1) PyTorch(1) 五子棋(12) 人工智能(2) 计算器(5) 模糊匹配(1) 图像处理(1) 模型保存加载(1) 井字棋(1)
You might like
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
python2.7实现FTP文件下载功能
2018/04/15 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Omio英国：搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
经贸韩语专业大学生职业规划
2014/02/14 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2014年城管工作总结
2014/11/20 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
php去除deprecated的实例方法
2021/11/17 PHP
vue router 动态路由清除方式
2022/05/25 Vue.js