Eingehende Analyse der Dropdown-Felder für Mehrfachauswahl und Fuzzy-Abfragen in Bootstrap-Select

In diesem Artikel erfahren Sie mehr über die Dropdown-Felder für Mehrfachauswahl und Fuzzy-Abfragen in Bootstrap-Select. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Einführung von Problemen

Der Blogger ist in der tatsächlichen Entwicklung auf ein Problem gestoßen, das heißt, es ist ein Dropdown-Steuerelement erforderlich, das sowohl Mehrfachauswahl als auch Fuzzy-Abfrage unterstützt. Down-Box-Plug-In Bootstrap- Select2, der Blogger hat damals auch darauf verwiesen, aber festgestellt, dass sein Multi-Select-Effekt relativ schlecht war, ähnlich wie hier:

Diese Art von Multi-Select-Steuerung muss Seien Sie lang genug, wenn die Auswahl einen bestimmten Grenzwert überschreitet, wird der Stil zusammengebrochen, wissen Sie ~ Später entdeckte ich versehentlich das Bootstrap-Select-Plug-In und stellte sofort fest, dass es sehr hochwertig ist! Es unterstützt sowohl Einzelauswahl als auch Mehrfachauswahl. Das Erstaunlichste ist, dass es sogar über eine Fuzzy-Abfragefunktion verfügt! Lassen Sie mich Ihnen zuerst die coolen Effekte zeigen:

Es ist schade, eine solche Steuerung nicht zu verwenden. Später fand der Blogger viele Dokumente und Blog-Referenzen, stellte jedoch fest, dass viele davon das nicht klar erklärten Spezifische Verwendung, einfach nur Ein Beispiel hat keinen großen Referenzwert. Der Blogger hat eine klare Zusammenfassung der Verwendung von Bootstrap-Select erstellt, indem er die relevanten Dokumente auf der offiziellen Website studiert und seine eigenen Entwicklungserfahrungen als Referenz verwendet hat. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]

Offizielle Plug-in-Adresse: http://silviomoreto.github.io/bootstrap-select

Github-Adresse: https://github.com/silviomoreto/ Bootstrap-Select

Anwendungsbeispiele (siehe offizielles Dokument Basisbeispiele)

1. Einzelauswahl

• Einfache Einzelauswahl Bei Auswahl ist standardmäßig kein „√“ vorhanden.

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

Effektanzeige

• Gruppeneinzelauswahl Achten Sie auf das Hinzufügen des Optgroup-Tags

   <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>

Effektanzeige

2. Im Vergleich zum Optionsfeld wird ein multiple-Tag hinzugefügt

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

Effektanzeige

multiple标签

<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>

效果展示

3.模糊查询

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

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

效果展示

4.多选限制

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

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'maxOptionsText':2;
             })

或者在初始化selectpicker时设置maxOptionsText

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

效果展示

5.自定义按钮的文本

通过属性title来控制。

• 选择框文本

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

效果展示

• 选择显示单条文本 意思就是选中相应的option，就展示option的title，比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。

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

效果展示

6.多选框格式化选择文本

通过属性 data-selected-text-format 来控制选中的值的显示 可选的值有如下4个：

1.values< img src="https://user-gold-cdn.xitu.io/2018/9/18/165ea61992510911?imageView2/0/w/1280/h/960/format/webp/ignore-error /1" wird geladen= "lazy" class="medium-zoom-image"/>

🎜3. Fuzzy-Abfrage🎜🎜🎜Fügen Sie eine data-live-search hinzu ="true"< /code> Attribut 🎜

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

🎜Effektanzeige🎜🎜🎜

🎜4.Mehrfache Auswahlbeschränkungen 🎜🎜🎜Fügen Sie das Attribut data-max-options="2" hinzu oder verwenden Sie maxOptionsText zur Begrenzung während der Initialisierung🎜

<select  data-  style="max-width:90%">
  ...
</select>

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

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

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

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

🎜oder legen Sie maxOptionsText fest, wenn Sie Selectpicker initialisieren🎜

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

🎜Effektanzeige🎜 🎜< img Loading= "lazy"/>🎜

🎜5 Der Text der benutzerdefinierten Schaltfläche🎜🎜🎜 wird über das Attribut title gesteuert . 🎜🎜🎜Feldtext auswählen🎜🎜

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

🎜Effektanzeige🎜🎜🎜🎜🎜Wählen Sie die Anzeige eines einzelnen Textes Das bedeutet, dass bei Auswahl der entsprechenden Option der Titel der Option angezeigt wird. Wenn beispielsweise „Burger, Shake and a Smile“ ausgewählt ist, wird Combo 2 im Textfeld angezeigt. 🎜🎜

.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>

🎜Effektanzeige🎜🎜🎜

🎜6. Mehrfachauswahlfeld formatiert ausgewählten Text🎜🎜🎜Bestanden Attribut data-selected-text-format zur Steuerung der Anzeige des ausgewählten Werts Es gibt 4 optionale Werte: 🎜🎜🎜1.values: durch Kommas getrennte Liste ausgewählter Werte (Systemstandard);

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 class="selectpicker show-menu-arrow">
  <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 class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>

效果展示

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'showSubtext':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样式的上拉框。

 $('.selectpicker').selectpicker({
                'selectedText':'cat',                   
                 'dropupAuto':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的用法，可以关注我后面的博客哦。

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

Das obige ist der detaillierte Inhalt vonEingehende Analyse der Dropdown-Felder für Mehrfachauswahl und Fuzzy-Abfragen in Bootstrap-Select. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!