动态联动select下拉框实现

look_w

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>