집 > 기사 > 웹 프론트엔드 > bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석

bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석

青灯夜游앞으로: 2021-05-10 10:58:033543검색

이 문서에서는 bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대해 자세히 알아봅니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

문제 소개

블로거는 이전에 실제 개발에서 문제에 직면했습니다. 즉, 잘 알려져 있고 강력한 드롭다운 컨트롤이 필요합니다. 다운박스 플러그인 부트스트랩 select2, 당시 블로거도 언급했지만 다중 선택 효과가 상대적으로 좋지 않다는 것을 발견했습니다. 이와 비슷하게

bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석

이런 종류의 다중 선택 제어는 반드시 충분히 길면 선택 항목이 특정 제한을 초과하면 스타일 붕괴가 발생합니다. 나중에 우연히 부트스트랩 선택 플러그인을 발견하고 그것이 매우 고급이라는 것을 즉시 깨달았습니다! 단일 선택과 다중 선택을 모두 지원합니다. 가장 놀라운 점은 퍼지 쿼리 기능도 제공된다는 것입니다. 먼저 멋진 효과를 보여드리겠습니다.

이러한 컨트롤을 사용하지 않는 것이 아쉽습니다. 나중에 블로거는 많은 문서와 블로그 참조를 찾았지만 그 중 많은 부분이 명확하게 설명되지 않은 것을 발견했습니다. 구체적인 사용법은 간단합니다. 예를 들어 설명하는 것은 큰 참조 가치가 없습니다. 블로거는 공식 웹 사이트에서 관련 문서를 연구하고 참고할 수 있도록 자신의 개발 경험을 결합하여 bootstrap-select 사용법을 명확하게 요약했습니다. [관련 추천: "bootstrap tutorial"]

공식 플러그인 주소: http://silviomoreto.github.io/bootstrap-select

Github 주소: https://github.com/silviomoreto/ bootstrap-select

응용예제 (공식문서 기본예제 참조)

1.단일 선택

단순 선택 선택 시 기본적으로 "√"가 없습니다.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

효과 표시

그룹 단일 선택 optgroup 태그 추가에 주의하세요

   <select class="selectpicker">
     <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
     </optgroup>
    <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
    </optgroup>
   </select>

Effect 표시

2. 다중 선택 상자

라디오 버튼 상자와 비교하여 multiple 태그가 추가됩니다multiple标签

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

3.模糊查询

添加一个data-live-search="true"的属性

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog</option>
  <option>Fries</option>
  <option>Soda</option>
  <option>Burger</option>
  <option>Shake</option>
  <option>Smile</option>
</select>

效果展示

4.多选限制

添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

或者在初始化selectpicker时设置maxOptionsText

$(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,
                &#39;maxOptionsText&#39;:2;
             })

效果展示

5.自定义按钮的文本

通过属性title

<select class="selectpicker" multiple title="请选择一个">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

효과 표시

3. 퍼지 쿼리

data-live-search 추가 ="true" 속성 <img  src="https://user-gold-cdn.xitu.io/2018/9/18/165ea64275b30206?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" loading="lazy" class="medium-zoom-image" alt="bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석" ><pre class="brush:html;toolbar:false;">&lt;select class=&quot;selectpicker&quot;&gt;
  &lt;option title=&quot;Combo 1&quot;&gt;Hot Dog, Fries and a Soda&lt;/option&gt;
  &lt;option title=&quot;Combo 2&quot;&gt;Burger, Shake and a Smile&lt;/option&gt;
  &lt;option title=&quot;Combo 3&quot;&gt;Sugar, Spice and all things nice&lt;/option&gt;
&lt;/select&gt;</pre>

효과 표시

4.다중 선택 제한

또는 selectpicker 초기화 시 maxOptionsText 설정

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

효과 표시

data-selected-text-format5. 맞춤 버튼

의 텍스트는 title 속성을 통해 제어됩니다. . values
🎜상자 텍스트 선택🎜🎜
<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>
🎜효과 표시🎜🎜🎜🎜🎜🎜단일 텍스트를 표시하려면 선택하세요. 즉, 해당 옵션을 선택하면 해당 옵션의 제목이 표시됩니다. 예를 들어 "버거, 쉐이크 앤 스마일"을 선택하면 텍스트 상자에 콤보 2가 표시됩니다. 🎜🎜
<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
🎜효과 표시🎜🎜🎜🎜🎜🎜6. 선택한 텍스트의 서식을 지정하는 다중 선택 상자🎜🎜🎜속성을 통해 선택한 값의 표시를 제어합니다. 🎜 4가지 선택 값이 있습니다: 🎜🎜🎜1.🎜: 선택한 값의 쉼표로 구분된 목록 (시스템 기본값);

2.count：如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；

3.count > x：当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；

4.static：无论选中什么，都只展示默认的选中文本。下面给几个简单示例

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

效果展示

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

效果展示

7.样式选择

按钮样式通过data-style来设置按钮的样式

<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>

效果展示

单选框样式这里要注意一下，单选框默认是没有多选框的选中之后的"√"图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可。

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

菜单的箭头 Bootstrap的菜单箭头也可以被添加进来，需要加入样式show-menu-arrow，个人感觉差别不大

<select>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

style样式自定义 bootstrap-select的样式不是死的，可以自定义style样式，类似最基本的css样式添加。

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

效果展示

宽度（Width）

1.引用bootstrap的样式

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

2.使用data-width属性，来定义宽度，可选的值有以下4个auto：select的宽度由option中内容宽度最宽的哪个决定；fit：select的宽度由实际选中的option的宽度决定；100px：select的宽度定义为100px；50%：select的宽度设置为父容器宽度的50%。

<select class="selectpicker" data-width="auto">
   <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
  <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
  <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
    <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>

效果展示：从左至右依次为“auto”,“fit","100px","50%"。

8.自定义option

1.添加图标用data-icon给option添加小图标，实现比较炫酷的效果

 <select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
  <option data-icon="glyphicon glyphicon-th-large">Mustard</option>
  <option data-icon="glyphicon glyphicon-home">Relish</option>
</select>

效果展示

如果想要获取更多样式可参考bootstrap官网的图标库，给个网址www.runoob.com/bootstrap/b…

2.插入HTML 用data-content可以在option中插入html元素,实现想要的效果。

<select class="selectpicker">
  <option data-content="<span class=&#39;label label-success&#39;>Relish</span>">Relish</option>
</select>

效果展示

3.插入二级标题用data-subtext实现二级标题，实现提示或者其他效果，如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。

<select>
    <option>Ketchup</option>
    <option>Mustard</option>    
    <option>Relish</option>
</select>

效果展示

$(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,
                &#39;showSubtext&#39;:true
             })
             
<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>

效果展示

9.自定义下拉菜单

1.菜单显示项大小通过data-size属性来限制菜单显示的条数，比如说option有8条，我们只展示5条,其余的通过滚动条显示。

<select class="selectpicker" data-size="5">
    <option>apple</option>
    <option>banana</option>
    <option>group</option>
    <option>orange</option>
    <option>cherry</option>
    <option>mango</option>
    <option>pineapple</option>
    <option>lychee</option>
</select>

效果展示(只展示前5个，后面的可以拖动滚动条查看)

2.全选和全不选通过设置data-actions-box="true"来添加全选和全不选的按钮

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

当然这个按钮的文本也是可以自定制的只需要在初始化时设置即可

       $('.selectpicker').selectpicker({
                'selectedText':'cat',
                 'noneSelectedText':'请选择',
                 'deselectAllText':'全不选',
                 'selectAllText': '全选',
             })

效果展示

3.添加数据分割线设置data-divider="true"添加数据分割线。

<select class="selectpicker" data-size="5">
  <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
  <option data-divider="true"></option>
   <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
</select>

效果展示

4.添加菜单头用data-header为下拉菜单设置菜单头

<select class="selectpicker" data-header="Select a condiment">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

5.设置菜单的上浮或者下浮通过设置dropupAuto来设置菜单的上下浮动，dropupAuto默认为true，自动确定是否应显示的菜单上面或下面的选择框，如果设置为false，系统会加入一个dropup样式的上拉框。

 $(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,                   
                 &#39;dropupAuto&#39;:false
             })

<select class="selectpicker dropup">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

10.不可用

在对应的控件上加入disabled即可实现 1.设置select不可用这里select按钮失效，不能点击

<select class="selectpicker" disabled>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

2.设置option不可用这里option设置属性为disabled的将无法选中

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

3.设置optiongroup不可用这里是一个optiongroup将无法选中

<select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

效果展示

总结

好的，这里我们基本上把官方的应用示例解读完毕，当然如果有疑问可以自己亲自去验证或者咨询博主，想实现自己想要的效果就要多加摸索和实践，只要明白其中的规则就能触类旁通了。第一篇关于bootstrap-select的官方示例文档的解读，如果想了解更多bootstrap-select的用法，可以关注我后面的博客哦。

更多编程相关知识，请访问：编程入门！！

위 내용은 bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성다음 기사：Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성

bootstrap-select의 다중 선택 및 퍼지 쿼리 드롭다운 상자에 대한 심층 분석

문제 소개

응용예제 (공식문서 기본예제 참조)

1.단일 선택

2. 다중 선택 상자

3.模糊查询

4.多选限制

5.自定义按钮的文本

<select class="selectpicker" multiple data-selected-text-format="count>3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>효과 표시

7.样式选择

8.自定义option

9.自定义下拉菜单

10.不可用

总结

관련 기사

<select class="selectpicker" multiple data-selected-text-format="count>3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>
효과 표시