JavaScript实现二级菜单联动(附jquery版本)

Posted 2020-10-12 code never lies

表单部分:

 1 <form>
 2          学院:&nbsp;<select id="college">
 3               <option >-----请选择------
 4               <option value="经济学院">经济学院
 5               <option value="管理学院">管理学院
 6               <option value="外国语学院">外国语学院
 7               <option value="马克思学院">马克思学院
 8           </select>&nbsp;&nbsp;&nbsp;&nbsp;
 9      专业:&nbsp;<select id="major">
10             <option id="comment">-----请选择------          
11       </select>
12   </form>

View Code

 

先说下思路:既然是联动的菜单,那么一定要根据前者学院的选项来添加后者专业的选项,其次每次在专业中添加新的选项时,一定要先进行清空,再添加,否则就会出现专业混杂的情况

js部分:

 1 <script>
 2                     var college = document.getElementById("college");
 3                     college.onchange = function () {
 4                         var major  = document.getElementById("major");
 5                         //判断
 6                         if(college.value  == "经济学院") {
 7                                 major.innerhtml = "";//生成新值前先进行清空
 8                                 var comment = document.createElement("option");
 9                                 comment.innerHTML = "-----请选择------";
10                                 major.appendChild(comment);
11                                 var a = document.createElement("option");
12                                 a.innerHTML = "电子商务";    
13                                 major.appendChild(a);
14                                 var b = document.createElement("option");
15                                 b.innerHTML = "市场营销";
16                                 major.appendChild(b);
17                                 var c = document.createElement("option");
18                                 c.innerHTML = "国际贸易";
19                                 major.appendChild(c);
20                                 var d = document.createElement("option");
21                                 d.innerHTML = "金融工程";
22                                 major.appendChild(d);
23                             }
24                             
25                         if(college.value  == "管理学院") {
26                                 major.innerHTML = "";
27                                 var comment = document.createElement("option");
28                                 comment.innerHTML = "-----请选择------";
29                                 major.appendChild(comment);
30                                 var a = document.createElement("option");
31                                 a.innerHTML = "工商管理";    
32                                 major.appendChild(a);
33                                 var b = document.createElement("option");
34                                 b.innerHTML = "旅游管理";
35                                 major.appendChild(b);
36                                 var c = document.createElement("option");
37                                 c.innerHTML = "会计管理";
38                                 major.appendChild(c);
39                                 var d = document.createElement("option");
40                                 d.innerHTML = "酒店管理";
41                                 major.appendChild(d);
42                             }
43                             
44                             if(college.value == "外国语学院") {
45                                 major.innerHTML = "";
46                                 var comment = document.createElement("option");
47                                 comment.innerHTML = "-----请选择------";
48                                 major.appendChild(comment);
49                                 var a = document.createElement("option");
50                                 a.innerHTML = "商务英语";    
51                                 major.appendChild(a);
52                                 var b = document.createElement("option");
53                                 b.innerHTML = "日语";
54                                 major.appendChild(b);
55                                 var c = document.createElement("option");
56                                 c.innerHTML = "小语种";
57                                 major.appendChild(c);
58                                 var d = document.createElement("option");
59                                 d.innerHTML = "中文";
60                                 major.appendChild(d);
61                             }
62                             if(college.value  == "马克思学院") {
63                                 major.innerHTML = "";
64                                 var comment = document.createElement("option");
65                                 comment.innerHTML = "-----请选择------";
66                                 major.appendChild(comment);
67                                 var a = document.createElement("option");
68                                 a.innerHTML = "马克思";    
69                                 major.appendChild(a);
70                                 var b = document.createElement("option");
71                                 b.innerHTML = "毛概";
72                                 major.appendChild(b);
73                             }
74     }
75     </script>

 

附上jquery的版本,思路相同,函数调用上略有不同,使用前要先引入jq相关的js文件

 1 <script>
 2         /**JQ实现二级菜单联动**/    
 3                     /* var $major = $("#major");
 4                       $("#college").change(function(){
 5                           var $college_name =  $("#college").val();
 6                           if("经济学院" == $college_name) {
 7                               $major.find("option").remove();
 8                               $major.append("<option>-----请选择------");
 9                               $major.append("<option>电子商务");
10                               $major.append("<option>市场营销");
11                               $major.append("<option>国际贸易");
12                               $major.append("<option>金融工程");
13                           }else if("管理学院" == $college_name) {
14                               $major.find("option").remove();
15                               $major.append("<option>-----请选择------");
16                               $major.append("<option>工商管理");
17                               $major.append("<option>旅游管理");
18                               $major.append("<option>会计管理");
19                               $major.append("<option>酒店管理");
20                           }else if("外国语学院" == $college_name) {
21                               $major.find("option").remove();
22                               $major.append("<option>-----请选择------");
23                               $major.append("<option>商务英语");
24                               $major.append("<option>小语种专业");
25                               $major.append("<option>中文专业");
26                           }else if("马克思学院" == $college_name) {
27                               $major.find("option").remove();
28                               $major.append("<option>-----请选择------");
29                               $major.append("<option>马克思");
30                               $major.append("<option>毛概");
31                           }
32                       }); */
33     </script>