Bootstrap SelectPicker 如何异步加载数据

使用SelectPicker请参考往期文章《Bootstrap SelectPicker 如何使用》。

此文讲述:如何异步加载数据达到联动的效果。

  1. 后台提供数据源接口。以”/test.do?poiIdText=TESTDATA”为例。
  2. 页面元素准备。
    触发者:以一个下拉框为例

    <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) {
                    //追加元素,根据实际情况确定
                    parent.append("<option value='"+data.data[i].id+"'>"+data.data[i].name+"</option>");
                }
                //重刷新组件
                parent.selectpicker('refresh');
            }
    
        })
    })
  3. 达到的效果:根据merchantId的变化去后台获得新的值,以加载到poiIds复选框。

 

Published by Kitho Ling

一个热爱自由,放荡不羁的Java软件工程师