bootstrapにおけるselectpickerドロップダウンボックスの使用方法の例

bootstrap selectpickerはbootstrapの簡単なドロップダウンボックスのコンポーネントで、まず効果を見てみましょう.

公式サイトapiリンクを添付し、http://silviomoreto.github.io/bootstrap-select/.
ドロップダウン・ボックスの使用上の基本的な操作は、ラジオ、マルチ選択、ファジイ検索、動的割り当てなどです.次に、どのように使用するかを見てみましょう.
使用方法は以下の通りです.
1、まず導入するcssとjs:
    bootstrap.css     bootstrap-select.min.css     jquery-1.11.3.min.js     bootstrap.min.js     bootstrap-select.min.js
2、jsコードは以下の通りである.
?
1
2
3
4 $( function () {    $( ".selectpicker" ).selectpicker({     noneSelectedText : ' ' //    });
?
1
2
3
4
5
6
7
8
9 // var select = $( "#slpk" ); select.append( " " ); select.append( " " ); select.append( " " ); select.append( " " ); select.append( " " ); select.append( " " ); select.append( " " );
?
1
2
3
4
5 //   $(window).on( 'load' , function () {    $( '.selectpicker' ).selectpicker( 'refresh' );   }); });
3、jsp内容:
?
1 < select id = "slpk" class = "selectpicker" data-live-search = "true" multiple> select >
Multipleの設定は複数選択で、data-live-search=「true」の場合はファジイ検索ボックスが表示され、falseの設定や等しくない場合は表示されません.
4、その他の方法:
選択したアイテムを取得するには、次の手順に従います.
?
1
2
3
4 var selectedValues = [];  slpk:selected").each( function (){ selectedValues.push($( this ).val()); });
指定されたアイテムを選択します(エコーの使用を編集):
ラジオ:$('.selectpicker').selectpicker('val',‘リストid');
複数選択:var arr=str.split(',');$('.selectpicker').selectpicker('val', arr);
5、私のソースコードを添付して、ドロップダウンデータはajaxを通じてバックグラウンドから取得します:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 $( 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( ""         + datas[i].ROAD_NAME + "" );      }      $( '.selectpicker' ).selectpicker( 'val' , '' );      $( '.selectpicker' ).selectpicker( 'refresh' );     }    });   });