bootstrap之可搜索的下拉框

<link href="/static/app/css/bootstrap-multiselect.css" rel="stylesheet">

<script src="/static/app/js/bootstrap-multiselect.js"></script>

<div class="form-group">
    <label class="col-md-2 control-label" >SQL输入方式:</label>
    <select type="input" class="multipleSelect singleSelect form-control"
    style="width:50%;" id="sql_select"
     data-live-search="true" name="sql_select">
    <option value=0>请选择</option>
    <option value=1>SQL语句</option>
    <option value=2>SQL附件</option>
    </select>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('select.multipleSelect').multiselect({
            buttonWidth: '50%',
            includeSelectAllOption: true,
            selectAllText:'全选',
            nonSelsequenceectedText:'请选择',
            allSelectedText:'全部',
            dropRight:true,
            maxHeight:true,
            enableFiltering:true,
        });
        $('select.singleSelect').multiselect({
            buttonWidth: '50%',
            includeSelectAllOption: true,
            nonSelectedText:'请选择',
            allSelectedText:'全部',
            dropRight:true,
            maxHeight:300,
            enableFiltering:true,
        });
    });
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。