Here is a summary of some problems encountered during the last use of bootstrap select. As for the specific usage of bootstrap select, I will not introduce it here. There are many examples on the Internet.

Address:

Official plug-in address: https://developer.snapappointments.com/bootstrap-select/

GitHub address: https://github.com/snapappointments/bootstrap-select

 

Problem 1: click no response, the drop-down box does not appear

Cause: the order of js file introduction may be wrong.

Correct order of introduction:

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-select/js/bootstrap-select.js"></script>

 

Question 2: how to load dynamic data

Method 1:

$.get("/test/ajax", function(result){
    if(result.code == 0){
        var addhtml = "";
        for (var i = 0; i < result.data.length; i++){
            addhtml += "<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>";
        }
        $('.selectpicker').html(addhtml);
    }
});

Method two:

$.get("/test/ajax", function(result){
    if(result.code == 0){
        for (var i = 0; i < result.data.length; i++){
            $('.selectpicker').append("<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>");
        }
    }
});

 

Problem 3: dynamic loading data is not displayed

Reason: plug in is not refreshed after dynamic data generation

Solution: add the following two statements after the data is loaded successfully.

//Use the refresh method to update the UI to match the new state
$('.selectpicker').selectpicker('refresh');
//render method forces the bootstrapper to be re rendered
$('.selectpicker').selectpicker('render');

 

Question 4: when using the filter, if both Chinese and English appear at the same time, there will be problems in the search

terms of settlement:

Note the following code in the bootstrap-select.js file:

that.$lis.not('.hidden, .divider, .dropdown-header').eq(0).addClass('active').children('a').focus();
$(this).focus();