JavaScript(jquery)实现二级菜单联动
表单部分:
1 <form> 2 学院: <select id="college"> 3 <option >-----请选择------ 4 <option value="经济学院">经济学院 5 <option value="管理学院">管理学院 6 <option value="外国语学院">外国语学院 7 <option value="马克思学院">马克思学院 8 </select> 9 专业: <select id="major"> 10 <option id="comment">-----请选择------ 11 </select> 12 </form>
先说下思路:既然是联动的菜单,那么一定要根据前者学院的选项来添加后者专业的选项,其次每次在专业中添加新的选项时,一定要先进行清空,再添加,否则就会出现专业混杂的情况
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>
