动态联动select下拉框实现

我们在做下拉框选择时，常常会遇到一种场景，就是需要两个下拉框，其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。

比如我有大的分类:

有氧运动  无氧运动

选择有氧运动时，选项有：跑步，游泳

选择无氧运动时，选项有：深蹲，卧推

本章记录如何实现动态联动select下拉框实现。

我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录动态联动select的实现。
应用bootstrap模板


基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架





我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面上做修改，实现动态联动select的实现。

如果要加上智能补全和模糊查询可把select下拉框初始化为select2。

详情参考:

智能补全模糊查询select2的下拉选择框使用

index.jsp代码如下:

<%@ include file="./include/header.jsp"%>




        

            



                

                    

                        

                            Select 下拉框动态联动
                        
                    
                
                

     

                    

                    分类选择:
                    

                        
                             - 分类 -
                            有氧运动 
                            无氧运动 
                        
                    
                
                

                    项目选择:
                    

                        
                            - 关联项目 -
                        
                    
                
             
           
  
                
            
            
        
        

    

        
        


 <%@ include file="./include/footer.jsp"%>

实现效果如下:

如果联动的内容是后台java传递过来的，只需要修改projectsMap的赋值即可。

如下:

     var projectsMap = {};
    	                if (projectType == 'aerobic') {
    	                    var projectsMap = {
    	                  '${ item.id }': '${ item.name }', 
    	                    };
    	                } else if (projectType == 'anaerobic') {
    	                    var projectsMap = {
    	                      '${ item.id }': '${ item.name }', 
    	                    };
    	                }

如果是编辑页面需要选中后台传递的实体对应的项目则在循环projectsMap时做判断：

 var pid='${projectId}';

  var option = "";
                for (var i in projectsMap) {
                    if (i == pid) {
                        option += '' + projectsMap[i] + '';
                    } else {
                        option += '' + projectsMap[i] + '';
                    }
                }