javascript联动菜单 jsp select 联动

select联动在实际项目中是再熟悉不过了，经常要使用到，每次都要去整理，梳理，会花费一些不必要的时间。然而select标签的使用，在不同的开发中也不一样，比如在vue中跟jsp中，今天主要是梳理在jsp中的应用，vue的使用也是类似。

当然，方法有很多种，下面这种方法是我个人比较经常使用的，需要的朋友可以参考借鉴。

一：假设现在jsp中有两个类别，一级类别和二级类别，二级类别跟随一级类别联动。一级类别和二级类别数据源来自于后台。我们的实现思路是在第一个select标签设置onChange事件，然后使用jq动态修改第二个select的option，那么在onChange事件中，我们要获取二级类别的数据，就有两个实现方式，一种是异步加载，一种是在jsp初始化的时候从后台传二级类别的所有数据，然后在进行匹配。鉴与数据量不多，今天要总结的则是使用第二种方式。下面是具体的代码。

controller，在调整jsp前的代码

public String form(YzCourse yzCourse, Model model) {
		model.addAttribute("yzCourse", yzCourse);
		//获取一级类别，二级类别
		model.addAttribute("level1List", courseCategoryService.findLevel1List());
		model.addAttribute("level2List", courseCategoryService.findLevel2List());
        //包含了id,parentId,name
		List<CourseCategory> categories=courseCategoryService.findLevel2List();

		return "modules/course/courseForm";
	}

courseForm.jsp

<tr>
				   <td >
                     //一级类别
					 <form:select path="level1" 
                         readonly="true" onchange="getLevel2(this.value)" >
						   <form:option value="">请选择</form:option>
						   <form:options  items="${level1List}" 
                                itemLabel="name" itemValue="id"></form:options>
					   </form:select>  
				   </td>
				   <td>
                    //二级类别
					 <form:select path="level2" id="level2">
						   <form:option value="">请选择</form:option>
						   <form:options items="${level2List}" 
                                itemLabel="name" itemValue="id"></form:options>
					   </form:select>
				   </td>
			   </tr>

相信有点jsp基础的朋友都看的懂，这边不做过多解释哈，有问题的朋友可以留言。

js：

<script>
	function getLevel2(level1){
      //后台获取的二级类别数据
	  var arr=${level2List};
      var options="";

      //回填的二级类别值
      var level2=${yzCourse.level2}+"";
      $("#level2").empty();
      options+="<option value=''>请选择</option>";
      //遍历二级类别数据，把parentId为level1的数据动态赋值到option中
      $.each(arr, function(i, item){
        if(parseInt(item.parentId) == parseInt(level1)){
           //此处是修改回填绑定的，增加了selected='true'属性
          if(parseInt(item.id) == level2){
            options+="<option selected='true'  value="+item.id+">"+item.name+"</option>";
		  }else{
            options+="<option value="+item.id+">"+item.name+"</option>";
          }
        }
      });
      $("#level2").append(options);
	}
</script>

最后，

//此处是修改的回填操作，当id不为空，去绑定二级类别数据
$(document).ready(function() {
			var id=${yzCourse.id}+"";
			if(id !=""){
              getLevel2(${yzCourse.level1});
			}
		});