Bootstrap SelectPicker 如何异步加载数据

使用SelectPicker请参考往期文章《Bootstrap SelectPicker 如何使用》。 此文讲述:如何异步加载数据达到联动的效果。 后台提供数据源接口。以”/test.do?poiIdText=TESTDATA”为例。 页面元素准备。 触发者:以一个下拉框为例 <select class=”form-control” id=”merchantId”> <option value=”0″>商家0</option> <option value=”1″>商家1</option> #end </select> 被动响应者:以下拉复选框为例 <select id=”poiIds” class=”selectpicker form-control” multiple data-actions-box=”true”> </select> 触发者的事件:以 change 事件为例。 及重新刷新组件。 $(“#merchantId”).change(function () { var poiIdText = $(this).val(); //被动响应者 var parent = $(“#poiIds”); $.ajax({ url:”/test.do”, data:{poiIdText:poiIdText}, success:function (data) { parent.empty(); // 循环便利数据源 for(var i in data.data) { //追加元素,根据实际情况确定 […]

Bootstrap 下如何使用 Selectpicker

引入样式和脚本 <link rel=”stylesheet” href=”/bootstrap-select/bootstrap-select.min.css”> <script src=”/bootstrap-select/bootstrap-select.min.js”></script> 页面代码: <select class=”form-control”> <option value=”0″>选项0</option> <option value=”1″>选项1</option> </select> 页面效果: ※样式和脚本可参照https://developer.snapappointments.com/bootstrap-select/使用 ※页面效果的数据源仅参考,于页面代码无关