Maison > Article > interface Web > Sélectionnez le code du menu déroulant à trois niveaux implémenté par les compétences JS_javascript
Sélectionnez le code du menu déroulant à trois niveaux implémenté par les compétences JS_javascript
- WBOYoriginal
- 2016-05-16 15:44:021565parcourir
L'exemple de cet article décrit le menu déroulant Sélectionner à trois niveaux implémenté dans JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
JS est utilisé ici pour implémenter le menu déroulant Sélectionner à trois niveaux, tel que la sélection nationale de la province et de la ville, la classification des produits numériques, la sélection des catégories de talents, etc., qui sont tous relativement représentatifs. Il est facile à utiliser. le menu déroulant Sélectionner dans le formulaire que les utilisateurs peuvent choisir. Bien sûr, vous devez encore apporter quelques modifications pour votre propre usage. Par exemple, au moins le contenu du menu doit être modifié selon vos besoins. dire.
L'effet de l'opération est comme indiqué ci-dessous :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-3-select-menu-codes/
Le code spécifique est le suivant :
<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>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémente le code d'effet de défilement automatique pour les compétences content_javascript de la liste de sélectionArticle suivant：js implémente le code d'effet de défilement automatique pour les compétences content_javascript de la liste de sélection
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript