1. 程式人生 > >bootstrap-select動態級聯多選下拉框

bootstrap-select動態級聯多選下拉框

1、引用css/js

<link href="../../plugins/css/bootstrap.min.css" rel="stylesheet">
<link href="../../plugins/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet">
<script src="../../plugins/js/jquery.min.js"></script>
<script src="../../plugins/js/bootstrap.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

2、html

<div class="form-group">
	<label class="col-sm-3 control-label">編碼</label>
	<div class="col-sm-7">
		<select class="form-control selectpicker" id="addCom">
	    </select>
    </div>
</div>
<div class="form-group">
	<label class="col-sm-3 control-label">使用者</label>
	<div class="col-sm-7">
		<select multiple id="addUsercode" class="selectpicker form-control">
		</select>
	</div>
</div>		

3、js 通過ajax獲取編碼,通過選擇編碼載入使用者,使用者可以多選

$.ajax({
          method:"post",
          url: '/list',
          dataType : "jsonp",
          async:true,
          success:function (result) {
          	 var str='<option value="">--請選擇--</option>';
             for (var i = 0; i < result.length; i++) {
               str+='<option value='+result[i].code+'>'+result[i].codename+'</option>';                     
            } 
            $("#addCom").html(str);      
          }
    });
    
    $("#addComcode").change(function(){
    	var code = $("#addCom").val();
    	$.ajax({
	          method:"post",
	          url: '/userList',
	          data:{
	          	code: code
	          },
	          success:function (res) {
	          	 var str="";
	             for (var i = 0; i < res.length; i++) {
	               str+='<option value="'+res[i].usercode+'">'+res[i].username+'</option>';
	            } 
	            $("#addUser").html(str);
	            $('#addUser').selectpicker('refresh');
	          }
	    });
    });

第一個select通過ajax獲取資料,第二個select通過第一select的change事件載入資料

注意:$('#addUser').selectpicker('refresh');這一句必須加,不然第二個資料顯示不出來