Sélectionnez le code du menu déroulant à trois niveaux implémenté par les compétences JS

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 :

三级下拉菜单(通用版) 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(" "); for (var i1 = 0;i1 "+Tstr1+" "); } document.writeln(" "); document.writeln(" "); var _AR111 = _Ds2.split("@"); var Tstr11 = _AR111[0]; var Vstr11 = (_AR111.length==2)?_AR111[1]:_AR111[0]; document.writeln(" "+Tstr11+" "); document.writeln(" "); document.writeln(" "); var _AR222 = _Ds3.split("@"); var Tstr22 = _AR222[0]; var Vstr22 = (_AR222.length==2)?_AR222[1]:_AR222[0]; document.writeln(" "+Tstr22+" "); document.writeln(" "); document.writeln(" "); document.writeln(""); document.writeln(" "); document.writeln(" "); document.writeln(""); document.writeln(" "); } <!-- var AllStr1 = "" +"东北地区{{" +"黑龙江((哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭" +"**吉林((长春^吉林^四平^辽源^通化^白山^松原^白城^延边" +"**辽宁((沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛" +"||华北地区{{" +"北京((东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆" +"**天津((和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县" +"**山东((济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽" +"**河北((石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水" +"**河南((郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源" +"**山西((太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城" +"**内蒙古((呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟" +"||华中地区{{" +"湖北((武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州" +"**湖南((长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界" +"||华南地区{{" +"广东((广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮" +"**广西((南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池" +"**福建((福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德" +"**海南((海口^三亚" +"||西南地区{{" +"四川((成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州" +"**重庆((万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川" +"**贵州((贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南" +"**云南((昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧" +"**西藏((拉萨^日喀则^山南^林芝^昌都^阿里^那曲" +"||西北地区{{" +"陕西((西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛" +"**甘肃((兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南" +"**宁夏((银川^石嘴山^吴忠^固原" +"**青海((西宁^海东^海南^海北^黄南^玉树^果洛^海西" +"**新疆((乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏" +"||华东地区{{" +"上海((黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明" +"**江苏((南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安" +"**浙江((杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水" +"**安徽((合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州" +"**江西((南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶" +"||港澳台地区{{" +"香港((香港" +"**澳门((澳门" +"**台湾((台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖" +"||其它地区{{" +"其它((其它" 选择一次 CreateSelect("","S_13|S_23|S_33","","请选择地区@|请选择省份@|请选择城市@",AllStr1,0); 选择三次 CreateSelect("HwForm","S_1|S_2|S_3","华北地区|山东|济宁","请选择地区@|请选择省份@|请选择城市@",AllStr1,3); 选择二次 CreateSelect("HwForm","S_11|S_21|S_31","笔记本|IBM|T42","请选择分类@|请选择品牌@|请选择系列@",AllStr2,2); 选择二次 CreateSelect("HwForm","S_12|S_22|S_32","","请选择分类@|请选择品牌@|请选择系列@",AllStr2,1); Copier après la connexion J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.