bootstrapプラグインbootstrap-selectの使い方
プロジェクトの中でドロップダウン多選を使用して、何回か調べてbootstrap-selectプラグインを見つけました。以下はプロジェクトで使ったいくつかの記録を参考にしてください。
公式サイトのアプリリンクを添付します。http://silviomoreto.github.io/bootstrap-select/.
以下のcssとjsファイルを導入する必要があります。
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js bootstrap-select.min.js
コードは以下の通りです。
公式サイトのアプリリンクを添付します。http://silviomoreto.github.io/bootstrap-select/.
以下のcssとjsファイルを導入する必要があります。
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js bootstrap-select.min.js
コードは以下の通りです。
<!--<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>-->
<div class="form-group">
<label class="col-sm-3 control-label"> ：</label>
<div class="col-sm-4">
<select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple="multiple" data-max-options="3" data-live-search="true">
<option value="0" style="background: #5cb85c; color: #fff;"> </option>
<option value="1" data-icon="glyphicon-heart"> </option>
<option value="2" data-content="<span class='label label-success'> </span>"> </option>
<option value="3" data-content="<span class='label label-success'> </span>"> </option>
<option value="4" data-content="<span class='label label-success'> </span>"> </option>
<option value="5"> </option>
<option value="6"> </option>
<option value="7"> </option>
<option value="8"> </option>
<option value="9"> </option>
</select>
</div>
</div>
<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"/>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"/>
<script src="js/bootstrap-select.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText: ' ',
countSelectedText: function(){}
});
});
function selectValue() {
//
alert($('#usertype').selectpicker('val'));
}
</script>
</code></pre>
<br/>
<br/>
<br/> bootstrap-select ：
<p>data-max-options="3" --》 </p>
<p><br/></p>
</div>
</div>
</div>
</div>