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

网络编程 2024/12/28 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

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

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-3-select-menu-codes/

具体代码如下：

<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)"|")
 var _SName1,_SName2,_SName3
 var _SName1 = _SNameArr[0]
 var _SName2 = (_SNameArr.length>1)"|")
 var _SValue1,_SValue2,_SValue3
 var _SValue1 = _SValueArr[0]
 var _SValue2 = (_SValueArr.length>1)"\(\("+_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)"<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)"<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)"<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)");
 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)");
 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,三级下拉菜单

标签：

JS,Select,三级下拉菜单

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“JS实现的Select三级下拉菜单代码”

暂无JS实现的Select三级下拉菜单代码的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

JS,Select,三级下拉菜单

javascript常用的方法整理

遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

评论“JS实现的Select三级下拉菜单代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

JS,Select,三级下拉菜单

javascript常用的方法整理

遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

评论“JS实现的Select三级下拉菜单代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存