美文网首页
bootstrap之可搜索的下拉框

bootstrap之可搜索的下拉框

作者: 徐德东 | 来源:发表于2018-12-06 14:42 被阅读0次
<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>

相关文章

网友评论

      本文标题:bootstrap之可搜索的下拉框

      本文链接:https://www.haomeiwen.com/subject/lbkocqtx.html