Bootstrap searchable drop-down box selectpicker usage

Sometimes, there are many options in the drop-down box, and the user will spend a long time making choices. With the help of bootstrap's selectpicker is a good choice.

Need to introduce related resources, the cdn address is  https://www.bootcdn.cn/bootstrap-select/

It is recommended that the order of css introduction is 1. bootstrap-select.css 2. bootstrap.css

<link rel="stylesheet" href="../static/css/bootstrap-select.css">
<link rel="stylesheet" href="../static/css/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="../static/css/bootstrap-datetimepicker.min.css">

It is recommended that the order of introduction of js is 1. jquery.js 2. bootstrap.js 3.bootstrap-select.js 

<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap-select.js"></script>

Example: Note that the characters typed in the search box will have different values ​​in the Chinese and English half-width states.

<div class="col-md-4" style="padding:0;">
    <select id="selectSf" class="selectpicker" multiple data-hide-disabled="true" data-size="5" data-live-search="true">
       <option value="00000000" selected="">alphabet</option>
       <option value="10000000">aa</option>
       <option value="20000000">bbb</option>
       <option value="20000000">cccc</option>
       <option value="30000000">ddddd</option>
       <option value="40000000">eeeeee</option>
    </select>
</div>

Analysis:

1. class = "selectpicker"; ordinary drop-down box

2. tittle = "Please select a data item"; the effect is the same as placeholder

3. class = "selectpicker" multiple; used together to achieve multiple selection

4. data-live-search = "true"; open fuzzy search, the default value is false, you need to manually set to open

5. data-max-options = "2"; Set the number of multiple choices, at most 2 options can be selected at this time

6.data-style = "btn-primary"; the style is selected by default, the button style of bootstrap

7. data-size = "10"; set the number of options displayed in the drop-down box

8. data-dropup-auto="false", which means that the drop-down box expands downward by default

9. $('.selectpicker').selectpicker('selectAll'); Select all:
    $('.selectpicker').selectpicker('deselectAll'); Reverse selection:
    $('.selectpicker').selectpicker('mobile' ); Adapt to mobile phone mode:

Problem: After dynamically adding data, the drop-down box is not rendered and no error is reported. These option values ​​exist when the browser views the source code. Or, it takes effect the first time you enter the page after compiling, and it becomes invalid after refreshing or switching to another interface.

deal with:

$(function () {
    $('.selectpicker').selectpicker('refresh');
    $('.selectpicker').selectpicker('render');
})

Value:

The selected value can be obtained through jquery: let source = $("#select").val().join();

Since the selected result is an array, remember to convert it to a string when using it.

Dynamic assignment:

$("#select").append("<option value='1111'>text</option>");