Use selectpicker to implement drop-down box in bootstrap-JS Tutorial-php.cn

Use selectpicker to implement drop-down box in bootstrap

php中世界最好的语言

Release： 2018-05-03 15:37:01

Original

3353 people have browsed it

This time I will bring you how to use selectpicker to implement the drop-down box in bootstrap, and what are the precautions for using selectpicker to implement the drop-down box in bootstrap. The following is a practical case, one Get up and take a look.

Preface

I have been using bootstrap recently and wrote a few blogs to record it. . . .

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 : '请选择'//默认显示内容 
  });

Copy after login

//数据赋值 
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>");

Copy after login

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

Copy after login

3. jsp content:

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

Copy after login

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()); 
});

Copy after login

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'); 
   } 
  }); 
 });

Copy after login

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 to use the keep-alive cache function

beforeEach to implement route jump verification function

The above is the detailed content of Use selectpicker to implement drop-down box in bootstrap. For more information, please follow other related articles on the PHP Chinese website!