Recently, I have been using bootstrap to write a few blogs....

bootstrap selectpicker is a relatively simple component of a drop-down box in bootstrap. The effect is as follows:

Attach the api link on the official website, http://silviomoreto.github.io/bootstrap-select/ (there seems to be something wrong with the official example, which hasn't been seen recently.)

The basic operations for using the drop-down box are: single selection, multi selection, fuzzy search, dynamic assignment, etc. Here's how to use it:

1. First, we need to introduce css and js:

    bootstrap.css

    bootstrap-select.min.css

    jquery-1.11.3.min.js

    bootstrap.min.js

    bootstrap-select.min.js

2. js code is as follows:

1. $(function() {  
2.         $(".selectpicker").selectpicker({  
3.             noneSelectedText : 'Please choose'//Default display content  
4.         });  

1.               //Data assignment  
2. var select = $("#slpk");  
3. select.append("<option value='1'>Banana</option>");  
4. select.append("<option value='2'>Apple</option>");  
5. select.append("<option value='3'>A mandarin orange</option>");  
6. select.append("<option value='4'>Pomegranate</option>");  
7. select.append("<option value='5'>Lollipop</option>");  
8. select.append("<option value='6'>Peach</option>");  
9. select.append("<option value='7'>Momoco</option>");  
10.                 

1.                //Initialize refresh data  
2.     $(window).on('load', function() {  
3.         $('.selectpicker').selectpicker('refresh');  
4.     });  
5.   
6. });  

3. jsp content:

1. <select id="slpk" class="selectpicker" data-live-search="true" multiple></select>  

When multiple is set, it is multiple selection. When data Live Search = "true", it displays fuzzy search box. When it is not set or equal to false, it does not display.

4. Other methods:

Get selected items:

1.               var selectedValues = [];      
2. slpk:selected").each(function(){  
3. selectedValues.push($(this).val());   
4. });  

Select the specified item (for edit echo):

Single choice: $('. selectpicker').selectpicker('val ','List id');

Remember: the list ID here is the same value of the value attribute that you dynamically load, otherwise it will not be selected by default (provided that it has been loaded and the value here has been loaded under select)

Multiple choice: var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);

5. Attach my source code, pull-down data is obtained from the background through ajax: