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

表单部分:

 <form>
          学院:&nbsp;<select id="college">
               <option >-----请选择------
               <option value="经济学院">经济学院
               <option value="管理学院">管理学院
               <option value="外国语学院">外国语学院
               <option value="马克思学院">马克思学院
           </select>&nbsp;&nbsp;&nbsp;&nbsp;
      专业:&nbsp;<select id="major">
             <option id="comment">-----请选择------
       </select>
   </form>

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

js部分:

 <script>
                     var college = document.getElementById("college");
                     college.onchange = function () {
                         var major  = document.getElementById("major");
                         //判断
                         if(college.value  == "经济学院") {
                                 major.innerHTML = "";//生成新值前先进行清空
                                 var comment = document.createElement("option");
                                 comment.innerHTML = "-----请选择------";
                                 major.appendChild(comment);
                                 var a = document.createElement("option");
                                 a.innerHTML = "电子商务";
                                 major.appendChild(a);
                                 var b = document.createElement("option");
                                 b.innerHTML = "市场营销";
                                 major.appendChild(b);
                                 var c = document.createElement("option");
                                 c.innerHTML = "国际贸易";
                                 major.appendChild(c);
                                 var d = document.createElement("option");
                                 d.innerHTML = "金融工程";
                                 major.appendChild(d);
                             }

                         if(college.value  == "管理学院") {
                                 major.innerHTML = "";
                                 var comment = document.createElement("option");
                                 comment.innerHTML = "-----请选择------";
                                 major.appendChild(comment);
                                 var a = document.createElement("option");
                                 a.innerHTML = "工商管理";
                                 major.appendChild(a);
                                 var b = document.createElement("option");
                                 b.innerHTML = "旅游管理";
                                 major.appendChild(b);
                                 var c = document.createElement("option");
                                 c.innerHTML = "会计管理";
                                 major.appendChild(c);
                                 var d = document.createElement("option");
                                 d.innerHTML = "酒店管理";
                                 major.appendChild(d);
                             }

                             if(college.value == "外国语学院") {
                                 major.innerHTML = "";
                                 var comment = document.createElement("option");
                                 comment.innerHTML = "-----请选择------";
                                 major.appendChild(comment);
                                 var a = document.createElement("option");
                                 a.innerHTML = "商务英语";
                                 major.appendChild(a);
                                 var b = document.createElement("option");
                                 b.innerHTML = "日语";
                                 major.appendChild(b);
                                 var c = document.createElement("option");
                                 c.innerHTML = "小语种";
                                 major.appendChild(c);
                                 var d = document.createElement("option");
                                 d.innerHTML = "中文";
                                 major.appendChild(d);
                             }
                             if(college.value  == "马克思学院") {
                                 major.innerHTML = "";
                                 var comment = document.createElement("option");
                                 comment.innerHTML = "-----请选择------";
                                 major.appendChild(comment);
                                 var a = document.createElement("option");
                                 a.innerHTML = "马克思";
                                 major.appendChild(a);
                                 var b = document.createElement("option");
                                 b.innerHTML = "毛概";
                                 major.appendChild(b);
                             }
     }
     </script>

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

 <script>
         /**JQ实现二级菜单联动**/
                     /* var $major = $("#major");
                       $("#college").change(function(){
                           var $college_name =  $("#college").val();
                           if("经济学院" == $college_name) {
                               $major.find("option").remove();
                               $major.append("<option>-----请选择------");
                               $major.append("<option>电子商务");
                               $major.append("<option>市场营销");
                               $major.append("<option>国际贸易");
                               $major.append("<option>金融工程");
                           }else if("管理学院" == $college_name) {
                               $major.find("option").remove();
                               $major.append("<option>-----请选择------");
                               $major.append("<option>工商管理");
                               $major.append("<option>旅游管理");
                               $major.append("<option>会计管理");
                               $major.append("<option>酒店管理");
                           }else if("外国语学院" == $college_name) {
                               $major.find("option").remove();
                               $major.append("<option>-----请选择------");
                               $major.append("<option>商务英语");
                               $major.append("<option>小语种专业");
                               $major.append("<option>中文专业");
                           }else if("马克思学院" == $college_name) {
                               $major.find("option").remove();
                               $major.append("<option>-----请选择------");
                               $major.append("<option>马克思");
                               $major.append("<option>毛概");
                           }
                       }); */
     </script>