How to use bootstrap's drop-down multiple selection box-Bootstrap Tutorial-php.cn

How to use bootstrap's drop-down multiple selection box

爱喝马黛茶的安东尼

Release： 2019-07-17 15:32:53

Original

9493 people have browsed it

When using the bootstrap-select component, first reference the following files

The last file defaults-zh_CN.min. js is not required, it only needs to be referenced when the culture is in the component.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select. 
min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>

Copy after login

It is even simpler to use. You don’t need any existing js and can be initialized directly using class.

Select radio option:

If no selected item is set, the first option will be selected by default. If the tilt attribute is set, the content of the title attribute will be displayed and will not be selected by default.

<select class="selectpicker" title="请选择">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>   
</select>

Copy after login

Option grouping

<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="广东省">
                <option value="1">广州市</option>
                <option value="2">深圳市</option>
                <option value="3">珠海市</option>
         </optgroup>   
          <optgroup label="广西">
                  <option value="1">南宁市</option>
                  <option value="2">柳州</option>
                  <option value="3">桂林市</option>
           </optgroup>  
           <optgroup label="山东">
                   <option value="1">烟台</option>
                   <option value="2">青岛</option>
                   <option value="3">济南</option>
             </optgroup>                          
</select>

Copy after login

How to use bootstraps drop-down multiple selection box

Default style, add Style: data- style="max-width:90%"

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

Copy after login

How to use bootstraps drop-down multiple selection box

Related recommendations: "bootstrap Getting Started Tutorial"

Add search: data -live-search="true"

<select class="selectpicker" data-live-search="true">....</select>

Copy after login

How to use bootstraps drop-down multiple selection box

Select multiple selection:

Add "multiple" set to multiple selection, and The setting can select up to 2 items data-max-options="2"

<select class="selectpicker form-control" multiple data-max-options="2">...</select>

Copy after login

Effect: How to use bootstraps drop-down multiple selection box

Add search: data-live-search="true"

Set the retrieval placeholder attribute: data-live-search-placeholder="Search"

Add the "select all/inverse selection" function button data-actions-box="true"

<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="搜索" 
data-actions-box="true">
　　<optgroup label="filter1">
　　　　<option>option1</option>
　　　　<option selected>option2</option>
　　　　<option>option3</option>
　　　　<option>option4</option>
　　</optgroup>
　　<optgroup label="filter2">
　　　　<option>option1</option>
　　　　<option>option2</option>
　　　　<option>option3</option>
　　　　<option>option4</option>
　　</optgroup>
　　<optgroup label="filter3">
　　　　<option>option1</option>
　　　　<option>option2</option>
　　　　<option>option3</option>
　　　　<option>option4</option>
　　</optgroup>
</select>

Copy after login

Effect: How to use bootstraps drop-down multiple selection box

js initialization, set the selected value

$(&#39;.selectpicker&#39;).selectpicker(&#39;val&#39;,&#39;mustard&#39;);
$(&#39;.selectpicker&#39;).selectpicker(&#39;val&#39;,[&#39;mustard&#39;,&#39;relish&#39;]);

Copy after login

Update UI

$(&#39;.selectpicker&#39;).selectpicker(&#39;refresh&#39;);

Copy after login

Selected event

$(&#39;.selectpicker&#39;).on(&#39;changed.bs.select&#39;,function(e){
});

Copy after login

The above is the detailed content of How to use bootstrap's drop-down multiple selection box. For more information, please follow other related articles on the PHP Chinese website!