若依框架使用 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")

 

打印日志

 

后台取数据