ドロップダウンボックス複数の選択肢

<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8" />
<タイトル>ブートストラップを選択</ TITLE>
<リンクのrel = "スタイルシート"のhref = "HTTPS：//cdn.bootcss。 COM / Twitterのブートストラップ/ 3.3.7 / CSS / bootstrap.min.css "/>
<リンクのrel = "スタイルシート"のhref =" https://cdn.bootcss.com/font-awesome/4.5.0/css/フォントawesome.min.css」/>
<リンクのrel = "スタイルシート"のhref = "https://cdn.bootcss.com/bootstrap-select/1.13.6/css/bootstrap-select.css" />

<スクリプトSRC = "https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.bootcss.com/twitter-bootstrap/3.3 0.7 / JS / bootstrap.min.js "> </ SCRIPT>
<スクリプトSRC = "https://cdn.bootcss.com/bootstrap-select/1.13.6/js/bootstrap-select.js"> </ SCRIPT>
</ HEAD>
<BODY>
<DIV CLASS = "ページ・コンテンツのコンテナ">
<divのクラス= 'ページ-体'>
の<divクラス= 'パネルパネル-デフォルト'>
の<divクラス= "パネルの見出し"> <h3のクラス= 'パネルのタイトル'>使用selectpicker类</ H3> </ div>
<テーブルクラス='テーブルのテーブルボーダー'>
<THEAD>
<TR>
<TH幅= 35>番号</番目>
<TH幅= "70％" >描述</番目>
<TH幅= "30％">选择框</番目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD>普通标准单选框</ TD>
<TD>
<選択したクラス= "selectpicker">
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
</ select>の
</ TD> </ TR>
<TR>
<TD> 2 </ TD>
<TD>带下拉分组OPTGROUP、选中项显示对勾</ TD>
<TD>
<選択したクラス= "selectpicker"データショウティック= "真">
<OPTGROUPラベル= "ピクニック">
<オプション>マスタード< /オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
</ OPTGROUP>
<OPTGROUPラベル= "キャンプ">
<オプション>テント</オプション>
<オプション>懐中電灯</オプション>
<オプション>トイレットペーパー</オプション>
</ OPTGROUP>
</ select>の
</ TD> </ TR>
<TR>
<TD> 3 </ TD>
<TD>多选、设置noneSelectedText为' -选择请- ' </ TD>
<TD>
<選択クラス=「selectpicker」データなし-選択されていないテキスト=「 -请选择- 」複数>
<オプション>ホットドッグ、フライドポテトとソーダ</オプション>
<オプション>バーガー、シェイクやスマイル</オプション>
<オプション>砂糖、香辛料のすべての観光名所ニース</オプション>
</ SELECT>
</ TD> </ TR>
<TR>
<TD> 4 </ TD>
<TD>選択され、提供ドロップダウンボックス右揃え、最もオプション2 </ TD>
<TD>
<SELECTクラス= "selectpicker"オプション複数データ-MAX = "2" "trueに" = =左-DATA-右ドロップダウンを揃える>
<オプション>ホットドッグ、フライドポテトとソーダA </オプション>
<オプション>バーガー、シェイクやスマイル</オプション>
<オプション>砂糖、香辛料のすべての観光名所ニース</オプション>
</ SELECT>
</ TD> </ TR>
<TR>
<TD>。5 </ TD>
<TD>複数の選択肢、すべてを選択し、表示ボタンの選択を解除し、中国への英語のテキスト</ TD>設定
<TD>
<クラス= SELECTを"selectpicker「複数のデータ・アクション・ボックス=」true「のデータの選択を解除し、すべてのテキスト= 『選択解除』データ選択-すべてのテキストは= 『すべて選択』>
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
</選択>
</ TD> </ TR>
<TR>
<TD> 6 </ TD>
<TD>多选、显示搜索框、可通过オプションデータ・トークン= "ケチャップマスタード"来指定搜索关键字</ TD>
<TD>
<選択したクラス= "selectpicker"は、複数のデータ・ライブ・サーチ= "true"をデータなし-結果テキスト= "没找到相应记录{0}「>
<オプションデータトークン=」ケチャップマスタード「>ホットドッグ、フライドポテトとソーダ</オプション>
<オプションデータトークンは=」マスタード">バーガー、シェイク笑顔</オプション>
<オプションのデータ・トークン= "フロスティング">砂糖、スパイスとすべてのもの素敵な</オプション>
</ select>の
</ TD>
</ TR>
</ TBODY>
</ TABLE>
</ div>
<divのクラス= "パネルパネル・デフォルト">
<DIV CLASS = "パネルの見出し"> <h3のクラス= 'パネルタイトル'>使用JS来初始化</ H3> </ div>
<テーブルクラス= 'テーブルテーブル-境'>
<THEAD>
<TR>
<第幅= 35>番号</番目>
<TH幅= "70％">描述</番目>
<TH幅= "30％">选择框</番目>
</ TR>
</ THEAD>
<TBODY >
<TR>
<TD> 1 </ TD>
<TD>普通标准单选框<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'make1（）'>初始化</ボタン> </ TD>
<TD>
<SELECTクラス= "フォーム制御入力-SM" ID = "BS-SELECT1">
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
</ select>の
</ TD> </ TR>
<TR>
<TD> 2 </ TD>
<TD>带下拉分组OPTGROUP、选中项显示对勾<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'make2（）'>初始化</ボタン> </ TD>
<TD >
<SELECTクラス= "フォーム制御入力-SM" ID = "BS-SELECT2">
<OPTGROUPラベル= "ピクニック">
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ< /オプション>
</ OPTGROUP>
<OPTGROUPラベル= "キャンプ">
<オプション>テント</オプション>
<オプション>懐中電灯</オプション>
<オプション>トイレットペーパー</オプション>
</ OPTGROUP>
</ select>の
</ TD> </ TR>
<TR>
<TD> 3 </ TD>
<TD>選択され、検索ボックスを表示し、検索キー<ボタンクラス=「BTN btn-指定する=「ケチャップマスタード」することができ onclickのSM BTN-主」タイプ=「ボタン」をオプションデータトークン= 'でmake3（）「>初期化</ボタン> </ TD>
<TD>
<SELECTクラス= "フォーム制御入力-SM"サイズ= 1つの複数ID = "BS-セレクト3">
<オプションデータトークン= "ケチャップマスタード">ホットドッグ、フライドポテトとソーダ</オプション>
<オプションDATA-トークン= "マスタード">バーガー、シェイクやスマイル</ option>を
<= "フロスティング"オプションデータ・トークン>砂糖、スパイスとすべてのもの素敵な</オプション>
</ select>の
</ TD> </ TR>
< / TBODY>
</ TABLE>
</ div>
<divのクラス= "パネルパネル-デフォルト">
<DIV CLASS = "パネルの見出し"> <h3のクラス= 'パネルタイトル'> API方法列表</ H3> < / DIV>
<テーブルクラス= 'テーブルテーブル-境'>
<THEAD>
<TR>
<TH幅= 35>番号</番目>
<TH幅= "70％">描述</番目>
<TH幅= "30％">选择框</番目>
</ TR>
</ THEAD>
< TBODY>
<TR>
<TD> 1 </ TD>
<TD>单选框取值、赋值<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'getval1（）'>取值</ボタン>
<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'setval1（）'>赋值</ボタン> </ TD>
<TD>
<SELECTクラス= "フォームコントロール入力-SM selectpicker "ID =" API-SELECT1" >
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
</選択>
</ TD> </ TR>
<TR>
<TD > 2 </ TD>
<TD>多选框取值、赋值<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'getval2（）'>取值</ボタン>
<ボタンクラス= 'BTN BTN-SM BTNプライマリ' TYPE = 'ボタン'のonclick = 'setval2（）'>赋值</ボタン> </ TD>
<TD>
<SELECTクラス= "フォームコントロール入力-SMのselectpicker"複数ID = "API-SELECT2">
<オプション>マスタード</オプション>
<オプション>ケチャップ</オプション>
<オプション>レリッシュ</オプション>
<オプション>マーカス</オプション>
<オプション> Lmlxj </オプション>
</ select>の
</ TD> </ TR>
<TR>
<TD> 3 </ TD>
<TD>删除オプション、和リフレッシュ比较をレンダリングし、オプション增|删|選択改变需要调用リフレッシュ才生效<ボタンクラス= 'BTN-SM BTN BTN-主'タイプ= 'ボタン'のonclick = 'DEL3（）'>删除オプション</ button>の
<ボタンクラス= 'BTN-SM BTN BTN -primary 'TYPE = 'ボタン'のonclick = 'render3（）'> </ボタン>レンダリング
<ボタンクラス='BTN BTN-SM BTNプライマリ」TYPE = 'ボタン'のonclick = 'refresh3（）'>リフレッシュ</ボタン>
</ TD>
<TD>
<SELECTクラス= "selectpicker形態制御入力-SM" ID = "API -select3" >
> 関数make1（）{ $（ "＃1 BS-SELECT1"）selectpicker（）。} 関数make2（）{ $（ "＃1 BS-SELECT2"）selectpicker（{showTick：真}）; }

関数make3（）{
$（ "＃1 BS-セレクト3"）selectpicker。（{ライブサーチ：真、noneResultsText： "没找到相应记录{0}"}）。
}
関数getval1（）{
アラート（ 'selectpicker（ "ヴァル"）：' + $（ "＃API-SELECT1"）selectpicker（ 'ヴァル'））;
警告（ '$（ "＃API-SELECT1"）のval（）：'。+ $（ "＃API-SELECT1"）のval（））;
}
関数setval1（）{
$（ "＃API-SELECT1"）selectpicker（ 'ヴァル'、 'ケチャップ'）。
。。//或$（ "＃のAPI-SELECT1"）のval（ 'ケチャップ'）selectpicker（ 'リフレッシュ'）;
}
関数getval2（）{
アラート（ 'selectpicker（ "ヴァル"）：' + $（ "＃API-SELECT2"）selectpicker（ 'ヴァル'））;
警告（ '$（ "＃のAPI-SELECT1"）。ヴァル（）：。 '+ $（ "＃のAPI-SELECT2"）のval（））;
}
関数setval2（）{
$（ "＃API-SELECT2"）selectpicker（ 'ヴァル'、[ 'ケチャップ'、 'マーカス']）。
// $（ "＃のAPI-SELECT2"）のval（[ 'ケチャップ'、 'マーカス']）selectpicker（ 'リフレッシュ'）。。。
}
関数DEL3（）{
。$（ '＃のAPI-セレクト3'）は、（ '[値=ケチャップ]'）を見つける（取り除きます）。
}
関数render3（）{
$（ '＃API-セレクト3'）selectpicker（ 'レンダリングします'）。
}
関数refresh3（）{
$（ '＃のAPI-セレクト3'）selectpicker（ 'リフレッシュ'）。
}
</ SCRIPT>
</ body>
</ HTML>

ドロップダウンボックス複数の選択肢

おすすめ