若依框架使用 bootstrap-select 動態從后台加載下拉選項

來源於   https://blog.csdn.net/torpidcat/article/details/96301937

<div class="box-tools pull-left">
    <div class="btn-group">
        <div class="col-sm-10" id="selectItem">
            <select id="itemSelect" name="itemSelect" οnchange="selectedItem()" class="selectpicker" title="全部" data-live-search="true">
                <!--<option value="y" selected>猴子偷桃</option>-->
                <!--<option value="m">八戒吃喝</option>-->
            </select>
        </div>
    </div>
</div>

 

<script type="text/javascript">
    var itemDataUrl = "http://....../returnJsonData";//選項返回鍵值對集合 json封裝
 
    //綁定bootstrap-select事件
    $('#itemSelect').on('shown.bs.select',function(e){
        //console.error("當前元素："+$('#itemSelect').html());
        //console.error("父節點："+$('#itemSelect').parent().html());
        //console.error("父節點下找到搜索文本框所在div："+$('#itemSelect').parent().find(".bs-searchbox").html());
        //console.error("根據類名鎖定文本框："+$('#itemSelect').parent().find(".bs-searchbox").find("input"));
        $('#itemSelect').parent().find(".bs-searchbox").find("input").attr('id',"searchParam");//為input增加id屬性
        //為input綁定鍵盤離開事件，觸發搜索
        $('#searchParam').keyup(function(){
            var searchParam = $('#searchParam').val().trim();
            var data = {
                'searchParam':searchParam,"shopId":""
            }
            itemData($('#itemSelect'),data);
        })
    });
 
    //商品
    function itemData($obj,data) {
        var html = '';
        $.post(itemDataUrl, data, function (res) {
            if (res.code == 200) {
                jQuery.each(res.result, function(i, val) {
                    html += '<option value="' + val.mapKey + '" >' + val.mapValue+ '</option>';
                });
                $obj.html(html);
                //必須加，刷新select
                $obj.selectpicker('refresh');
            } else {
                layer.msg(res.msg, {time: 2000});
            }
        }, 'json');
    }
 
</script>

 

這里的js動態加載數據方式參考
https://blog.csdn.net/m0_37355951/article/details/78287278#commentsedit

https://blog.csdn.net/m0_37355951/article/details/78292910

https://blog.csdn.net/w309827333/article/details/82424944

https://blog.csdn.net/wg526125649/article/details/84622527

參考的文章里，一些代碼不適用我的項目，所以適當修改下，大概思路是一樣的，確定當前select所在節點，找到相鄰的bootstrap生成的輸入框所在節點，給輸入框id賦值，實時監控輸入框文本，或者用一個搜索按鈕，獲取后台數據。

 

 

瀏覽器審查元素，查看文本框所在節點，發現在select隔壁的隔壁的下邊，那么js里可以使用jquery的方式找到它，給它設置id，便於后邊監聽它，並根據輸入內容動態加載選項

$('#itemSelect').parent().find(".bs-searchbox").find("input")

 

打印日志

 

后台取數據