若依框架使⽤bootstrap-select动态从后台加载下拉选项想要的效果：
⼀个搜索框
搜索框实时加载后台数据
jquery框架使用
选中
HTML代码：
<div class="box-tools pull-left">
<div class="btn-group">
<div class="col-sm-10" id="selectItem">
<select id="itemSelect" name="itemSelect" onchange="selectedItem()" class="selectpicker" title="全部" data-live-search="true">
<!--<option value="y" selected>猴⼦偷桃</option>-->
<!--<option value="m">⼋戒吃喝</option>-->
</select>
</div>
</div>
</div>
JS代码:
<script type="text/javascript">
var itemDataUrl = "....../returnJsonData";//选项返回键值对集合 json封装
//绑定bootstrap-select事件
$('#itemSelect').on('shown.bs.select',function(e){
//("当前元素："+$('#itemSelect').html());
/
/("⽗节点："+$('#itemSelect').parent().html());
//("⽗节点下到搜索⽂本框所在div："+$('#itemSelect').parent().find(".bs-searchbox").html());
//("根据类名锁定⽂本框："+$('#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 (de == 200) {
jQuery.sult, 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>
参考的⽂章⾥，⼀些代码不适⽤我的项⽬，所以适当修改下，⼤概思路是⼀样的，确定当前select所在节点，到相邻的bootstrap⽣成的输⼊框所在节点，给输⼊框id赋值，实时监控输⼊框⽂本，或者⽤⼀个搜索按钮，获取后台数据。
浏览器审查元素，查看⽂本框所在节点，发现在select隔壁的隔壁的下边，那么js⾥可以使⽤jquery的⽅式到它，给它设置id，便于后边监听它，并根据输⼊内容动态加载选项
$('#itemSelect').parent().find(".bs-searchbox").find("input")
这⾥是打印⽇志：
后台返回的json数据：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。