bootstrap-select動態級聯多選下拉框
阿新 • • 發佈:2018-11-12
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');這一句必須加,不然第二個資料顯示不出來