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

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.

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

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:

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

效果展示

3.模糊查询

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

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

Nach dem Login kopieren

效果展示

4.多选限制

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

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

Nach dem Login kopieren

或者在初始化selectpicker时设置maxOptionsText

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

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示

选择显示单条文本意思就是选中相应的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>

Nach dem Login kopieren

效果展示

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> Nach dem Login kopieren Nach dem Login kopieren 🎜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 class="selectpicker" data- style="max-width:90%"> ... </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> Nach dem Login kopieren 🎜oder legen Sie maxOptionsText fest, wenn Sie Selectpicker initialisieren🎜<select class="selectpicker show-tick"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> Nach dem Login kopieren Nach dem Login kopieren 🎜Effektanzeige🎜 🎜< img src="https://user-gold-cdn.xitu.io/2018/9/18/165ea638493bcdfd?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" Loading= "lazy" class="medium-zoom-image"/>🎜 🎜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> Nach dem Login kopieren Nach dem Login kopieren 🎜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> Nach dem Login kopieren Nach dem Login kopieren 🎜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>

Nach dem Login kopieren

效果展示

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

Nach dem Login kopieren

效果展示

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

Nach dem Login kopieren

效果展示

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

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

Nach dem Login kopieren

效果展示

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

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

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示

宽度（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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

效果展示：从左至右依次为“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>

Nach dem Login kopieren

效果展示

如果想要获取更多样式可参考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>

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示

$('.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>

Nach dem Login kopieren

效果展示

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

效果展示

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

       $(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,
                 &#39;noneSelectedText&#39;:&#39;请选择&#39;,
                 &#39;deselectAllText&#39;:&#39;全不选&#39;,
                 &#39;selectAllText&#39;: &#39;全选&#39;,
             })

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示

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

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

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示

`10.不可用`

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

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

Nach dem Login kopieren

效果展示

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

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

Nach dem Login kopieren

效果展示

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>

Nach dem Login kopieren

效果展示


总结
好的，这里我们基本上把官方的应用示例解读完毕，当然如果有疑问可以自己亲自去验证或者咨询博主，想实现自己想要的效果就要多加摸索和实践，只要明白其中的规则就能触类旁通了。第一篇关于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!