selectpicker 使用簡介附樣例

最近開發中使用selectpicker下拉框選擇國家及地區，以此為樣例簡單記錄下使用方法。

1、從數據庫取值初始化下拉框內容。

     html代碼如下，multiple 屬性為多選。

<select class="col-md-12 padding-none select" id="country" data-live-search="true" multiple >
</select>

     此處省略后台代碼，將數據data返回到前台后，js處理如下：

//data是后台返回到前台的數據格式為List<Map<String,Object>>
var country = $("#country").attr("value");
if($("#country").children().length==0){
    $("#country").append("<option value=''>請選擇</option>");
    if(data){
        $.each(data, function(i,o){
             if(country == o.COUNTRY_ID){
                 $("#country").append("<option value='"+o.COUNTRY_ID+"' selected='selected'  >"+o.COUNTRY_NAME+"</option>");
             }else{
                 $("#country").append("<option value='"+o.COUNTRY_ID+"'>"+o.COUNTRY_NAME+"</option>");
             }
        });
    }
    $("#country").selectpicker({//初始化
        size: 5
    });
}

    效果如圖：

 

2、給下拉框設置默認值

     若下拉框為單選，方法如下：

$("#country").selectpicker('val', 'USA');

     若下拉框為多選，方法如下：

var arr=['a','b','c'];
$("#country").selectpicker('val', arr);

3、選中值后，如何獲取value和文本內容

    獲取value方法：

//單選獲取值為字符串，多選獲取值為數組
$("#country").val()；

   獲取文本方法：

   單選：

$("#country").find("option:selected").text()；

   多選：

var country_name = "";
for(var i=0;i<$("#country").find("option:selected").length;i++){
    if(i==0){
        country_name = $("#country").find("option:selected")[i].innerText;
    }else{
        country_name = country_name + ',' + $("#country").find("option:selected")[i].innerText;
    }
}

 

下拉框多選后，清除選中內容：

$("選中的控件").selectpicker('deselectAll');

 

給下拉框添加選項后，下拉框無內容可以添加下面語句：

$("#id").selectpicker('refresh');

 

本文系原創，轉載請標明出處鏈接。