Case study on using selectpicker drop-down box

This time I will bring you a case analysis of using the selectpicker drop-down box. What are the precautions when using the selectpicker drop-down box? The following is a practical case, let's take a look.

Preface

I have been using some things from bootstrap recently and wrote a few blogs to record them. . . .

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

##Attached is the official website api link, http:// silviomoreto.github.io/bootstrap-select/.

The basic operations for using drop-down boxes are generally: single selection, multiple selection, fuzzy

search, dynamic assignment, etc. Let’s see how Usage:

The usage method is as follows

1. The css and js that need to be introduced first:

bootstrap.css

bootstrap-select.min.css

jquery-1.11.3.min.js bootstrap.min.js
bootstrap-select. min.js

2. The js code is as follows:

$(function() { 
  $(".selectpicker").selectpicker({ 
   noneSelectedText : '请选择'//默认显示内容 
  });

//数据赋值 
var select = $("#slpk"); 
select.append("<option value=&#39;1&#39;>香蕉</option>"); 
select.append("<option value=&#39;2&#39;>苹果</option>"); 
select.append("<option value=&#39;3&#39;>橘子</option>"); 
select.append("<option value=&#39;4&#39;>石榴</option>"); 
select.append("<option value=&#39;5&#39;>棒棒糖</option>"); 
select.append("<option value=&#39;6&#39;>桃子</option>"); 
select.append("<option value=&#39;7&#39;>陶子</option>");

//初始化刷新数据 
 $(window).on('load', function() { 
  $('.selectpicker').selectpicker('refresh'); 
 }); 
});

3. jsp content:

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

Settings When multiple is used, it is multi-selection. When data-live-search="true", the fuzzy search box is displayed. When it is not set or equal to false, it is not displayed.

4. Other methods:

Get the selected item:

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

Select the specified item (used for editing echo):

                                                                                                                                                                                                                                                                                                        # selectpicker').selectpicker('val', arr);

5. Attached is my source code. The drop-down data is obtained from the background through ajax:

$(function() { 
  $(".selectpicker").selectpicker({ 
   noneSelectedText : '请选择' 
  }); 
  $(window).on('load', function() { 
   $('.selectpicker').selectpicker('val', ''); 
   $('.selectpicker').selectpicker('refresh'); 
  }); 
  //下拉数据加载 
  $.ajax({ 
   type : 'get', 
   url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail", 
   dataType : 'json', 
   success : function(datas) {//返回list数据并循环获取 
    var select = $("#slpk"); 
    for (var i = 0; i < datas.length; i++) { 
     select.append("<option value=&#39;"+datas[i].ROAD_CODE+"&#39;>" 
       + datas[i].ROAD_NAME + "</option>"); 
    } 
    $('.selectpicker').selectpicker('val', ''); 
    $('.selectpicker').selectpicker('refresh'); 
   } 
  }); 
 });

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website! Recommended reading:

How does JS store original values ​​and reference values

Detailed explanation of the use of common JS functions

The above is the detailed content of Case study on using selectpicker drop-down box. For more information, please follow other related articles on the PHP Chinese website!