bootstrap-select 多选下拉框 带搜索

<div class="cnblogs_code">

    
    下拉多选
      
     
    
<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">style<span style="color: #0000ff">="width: 200px;"<span style="color: #0000ff">>　　　　　　　<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">select <span style="color: #ff0000">id<span style="color: #0000ff">="usertype"<span style="color: #ff0000"> name<span style="color: #0000ff">="usertype"<span style="color: #ff0000"> class<span style="color: #0000ff">="selectpicker show-tick form-control"<span style="color: #ff0000"> multiple data-live-search<span style="color: #0000ff">="false" <span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="0"<span style="color: #0000ff">>北京<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="1"<span style="color: #0000ff">>上海<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="2"<span style="color: #0000ff">>广州<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="3"<span style="color: #0000ff">>深圳<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="4"<span style="color: #0000ff">>浙江<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="5"<span style="color: #0000ff">>江苏<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="6"<span style="color: #0000ff">>安徽<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="7"<span style="color: #0000ff">>哈尔滨<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="8"<span style="color: #0000ff">>乌鲁木齐<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="9"<span style="color: #0000ff">>西藏<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">select<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="jquery.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>　　<span style="color: #0000ff"> <span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="bootstrap/js/bootstrap.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">> <span style="color: #0000ff"> <span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">> <span style="color: #0000ff"> <span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">> <span style="color: #0000ff"> <span style="color: #008000">

效果:

带搜索: 只需要将

搜索到选中:

官方api: 里面有所需要js和css jquery和bootstrap 自己下载来引入就好了

https://developer.snapappointments.com/bootstrap-select/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!