动态联动select下拉框实现

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

比如我有大的分类:

有氧运动  无氧运动

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

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

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

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

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




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

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

详情参考:

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

index.jsp代码如下:

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


<link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"
      type="text/css"></link>

        <div id="page-wrapper">
            <div id="page-inner">


                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            Select <small>下拉框动态联动</small>
                        </h1>
                    </div>
                </div>
                <!-- /. ROW  -->

     <form class="form-horizontal" id="navigation">
                    <div class="form-group">
                    <label for="sourceModule" class="col-sm-2 control-label">分类选择:</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="projectType" name="projectType">
                            <option value=""> - 分类 -</option>
                            <option value="aerobic">有氧运动 </option>
                            <option value="anaerobic">无氧运动 </option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sourceId" class="col-sm-2 control-label">项目选择:</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="projectId" name="projectId">
                            <option value="">- 关联项目 -</option>
                        </select>
                    </div>
                </div>
             
           </form>  
                <!-- /. ROW  -->
            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->

    

        
        


 <%@ include file="./include/footer.jsp"%>
<script src="/plugins/select2/dist/js/select2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
    	//绑定分类下拉框选项变化事件
    	   $("#projectType").on('change',
    	            function () {
    	                var projectType = $(this).val();
    	                $('#projectId').val('').trigger('change');
    	                
    	                if (projectType == '') {
    	                	$("#projectId").empty().append('<option value="" >- 关联项目 -</option>');
    	                    return;
    	                }

    	                var projectsMap = {};
    	                if (projectType == 'aerobic') {
    	                    var projectsMap = {
    	                       '1':'跑步','2':'游泳',
    	                    };
    	                } else if (projectType == 'anaerobic') {
    	                    var projectsMap = {
    	                    		 '3':'深蹲','4':'卧推',
    	                    };
    	                }
    	                
    	                
    	                var option = "";
    	                for (var i in projectsMap) {
    	                        option += '<option value="' + i + '"  >' + projectsMap[i] + '</option>';
    	                }

    	                $("#projectId").empty().append('<option value="" >- 关联项目 -</option>' + option);


    	            });

    });

</script>


</body>

</html>

实现效果如下:

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

如下:

var projectsMap = {};
    	                if (projectType == 'aerobic') {
    	                    var projectsMap = {
    	                  <c:forEach items="${aerobics}" var="item">'${ item.id }': '${ item.name }', </c:forEach>
    	                    };
    	                } else if (projectType == 'anaerobic') {
    	                    var projectsMap = {
    	                      <c:forEach items="${anaerobics}" var="item">'${ item.id }': '${ item.name }', </c:forEach>
    	                    };
    	                }

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

var pid='${projectId}';

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