首页
所有分类
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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
React中的render何时执行过程
Apr 13 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
JS实现放大镜效果
Sep 21 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
Vue实现多页签组件
Jan 14 Vue.js
遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）
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
创业计划书(312) 职业生涯规划书(234) 演讲稿(869) 证婚词(21) 岗位职责(1324) 道歉信(39) 心得体会(660) 思想汇报(404) 欢迎词(65) 推荐信(292)
You might like
二招解决php乱码问题
2012/03/25 PHP
php在项目中寻找代码的坏味道（综艺命名）
2012/07/19 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python实现二维数组的对角线遍历
2019/03/02 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Django celery异步任务实现代码示例
2020/11/26 Python
Contém1g官网：巴西彩妆品牌
2020/01/17 全球购物
澳洲的UGG雪地靴超级市场：Uggs.com.au
2020/04/06 全球购物
项目资料员岗位职责
2013/12/10 职场文书
创意活动策划书
2014/01/15 职场文书
四年大学自我鉴定
2014/02/17 职场文书
公司门卫工作职责
2014/06/28 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
小学重阳节活动总结
2015/03/24 职场文书
祝寿主持词
2015/07/02 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
python编程实现清理微信重复缓存文件
2021/11/01 Python