javascript实现多选选项二级联动

时间:2020-03-27
本文章向大家介绍javascript实现多选选项二级联动,主要包括javascript实现多选选项二级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

效果展示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6     <script type="text/javascript">
 7         var provinceArr = new Array(5);     //定义数组保存二级市级名称
 8         provinceArr[0]=new Array("北京市");
 9         provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
10         provinceArr[2]=new Array("石家庄市","唐山市","秦皇岛市","邯郸市");
11         provinceArr[3]=new Array("西安市","宝鸡市","延安市");
12         provinceArr[4]=new Array("菏泽市","济南市","青岛市");
13 
14 
15         function provinceChange(province) {
16             var city = document.getElementById("city");
17             if (province.value=="-1"){                //判断当一级选项选择 请选择 时,二级选项也为 请选择
18                 city.innerHTML="<option value=\"-1\">-请选择-</option>";
19                 return;    //加return表示如果一级选择 请选择 选项,二级选项不用遍历
20             }
21             city.options.length=0;    //设置二级选项的option标签数量为0,每次一级选项改变时,二级选项内容先清空再添加
22             var cityArr=provinceArr[province.value];
23             for(var i=0;i<cityArr.length;i++){
24                 var cityOption = document.createElement("option");    //* <option></option>
25                 cityOption.innerText=cityArr[i];
26                 city.appendChild(cityOption);      //* appendChild
27             }
28         }
29     </script>
30 </head>
31 <body>
32     <select onchange="provinceChange(this)">
33         <option value="-1">-请选择-</option>
34         <option value="0">北京市</option>
35         <option value="1">河南省</option>
36         <option value="2">河北省</option>
37         <option value="3">陕西省</option>
38         <option value="4">山东省</option>
39     </select>
40     <select id="city">
41         <option value="-1">-请选择-</option>
42     </select>
43 </body>
44 </html>

原文地址:https://www.cnblogs.com/zuzhuangmengxiang/p/12582814.html