jquery.editable-select带输入框的下拉框

最新推荐文章于 2024-04-27 09:43:38 发布

weixin_34194379

最新推荐文章于 2024-04-27 09:43:38 发布

阅读量730

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/lylyg/blog/3021778

版权

为什么80%的码农都做不了架构师？>>>

一、html部分

<div class="form-group">
    <select name="depart" id="depart" class="form-control">
        @foreach($departs as $item)
            <option value="{{$item->id}}">{{$item->depart_name}}</option>
        @endforeach
            <input type="text" hidden id="depart_id">
    </select>
</div>

二、JS引入

<link rel="stylesheet" href="{{asset('lib/jquery.editable-select/jquery-editable-select.min.css')}}">
<script src="{{asset('lib/jquery.editable-select/jquery-editable-select.min.js')}}"></script>

三、声明

//带输入框的下拉框
$("#depart").editableSelect({
    filter: true,
    //bg_iframe:true,
    //effects: 'fade',
    case_sensitive: false,
}).on("select.editable-select", function (e, li) {
    var dataValue = li.attr("data-value");
    $("#depart_id").val(li.val());
});
$("#depart").prop("placeholder", "==请输入或选择科室==");