标签:content items ems == ctp one style data- result
1、html代码块
需要引入bootstrap的css js jquery
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js
<select class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article"> <option value="" data-name="">请选择物品</option> </select>
2、js代码
$(‘.selectpicker‘).selectpicker({
            noneSelectedText: ‘‘,
            noneResultsText: ‘‘,
            liveSearch: true,
            size:5   //设置select高度,同时显示5个值
});
$(window).on(‘load‘, function () {
    var sid = $("#select_article").val();
    $(‘.selectpicker‘).selectpicker(‘val‘, ‘‘);
    $(‘.selectpicker‘).selectpicker(‘refresh‘);
    $.ajax({
        method:‘POST‘,
        url:‘get_items‘,
        dataType:‘json‘,
        success: function (res) {
            var html="<option value=‘0‘>请选择物品</option>";
            console.log(res);
            for (var i = 0; i < res.content.length; i++) {
                if (sid == res.content[i].tid) {
                    html += "<option  value=‘" + res.content[i].tid + "‘ selected=‘selected‘ data-name=‘"+res.content[i].name+"‘>" + res.content[i].name + "</option>";
                } else {
                    html += "<option  value=‘" + res.content[i].tid + "‘ data-name=‘"+res.content[i].name+"‘>"+ res.content[i].name + "</option>";
                }
            }
            $("#select_article").html(html);
            $(‘.selectpicker‘).selectpicker(‘refresh‘);//加载select框选择器
        }
    });
});
 
插件功能还是比较强大,做出来后还是有点欣喜的 唉 原谅我这烂烂的js
基于bootstrap selectpicker ,实现select下拉框模糊查询功能
标签:content items ems == ctp one style data- result
原文地址:https://www.cnblogs.com/pfdltutu/p/9019234.html