Bootstrap实现可编辑下拉框

1.bootstrap可编辑下拉框所需文件

链接：https://pan.baidu.com/s/1DTNlcjoQe24SYBFfJI1Mlg 
提取码：lqzu 

先引入jQuery.js在引入其他的

2.select控件

<div class="form-group">
<span id="spanlab_client">
    <label class="col-sm-3 control-label" id="lab_client">客户</label>
    </span>
    <div class="col-sm-9" id="div_client">
        <select class="form-control" id="client" name="client"></select>
    </div>
</div>

为了控件的样式  默认选择bootstrap的style

3.js部分

可以用Ajax后台循环遍历获得的数据 追加到select控件中

$.each(req[2],function (i,t) {
    $("#client").append("<option value='"+t.id+"'>"+t.name+"</option>");
});

$("#client").editableSelect({
        bg_iframe: true,
        case_sensitive: false,//是否进行匹配
        items_then_scroll: 10 ,//下拉列表显示数目的条目
        isFilter:false,//是否过滤
    onSelect:function(){ console.log("下拉框选中") },
    onCreat:function(){ console.log("下拉创建") },
    onShow:function(){ console.log("下拉框显示") },
    onHide:function(){ console.log("下拉框隐藏") }
    });

 4.效果图

当前的select的控件既可以输入 也可以下拉选择

 

有什么问题欢迎指正0.0