How to use bootstrap+selectpicker drop-down box in actual projects-JS Tutorial-php.cn

How to use bootstrap+selectpicker drop-down box in actual projects

php中世界最好的语言

Release： 2018-06-14 11:45:28

Original

1471 people have browsed it

This time I will show you how to use the bootstrap selectpicker drop-down box in actual projects. What are the precautions for using the bootstrap selectpicker drop-down box in actual projects? The following is a practical case, let's 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 to use it:

The usage method is as follows

1. First, the css and js that need to be introduced:

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

When setting multiple, it is multi-select, data-live-search= The fuzzy search box is displayed when "true", and not displayed when it is not set or equal to false.

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:

Detailed explanation of url, href, src usage

How Webpack operates cache

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