概要
bootstrap のデフォルトでは
selectタグのスタイルはイマイチ。
bootstrap-selectを使用すると、selectタグを
Button dropdown menu に置き換えてくれる。
テストページ
bootstrap-select.css, bootstrap-select.js を読み込む
スタイルを変更したい selectタグに selectpickerクラスをセットする
$(document).ready にて $(".selectpicker").selectpicker();を実行する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ぶーとすとらっぷ せれくと</title>
<link rel="stylesheet" href="vender/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="vender/bootstrap-select/bootstrap-select.min.css" />
<style type="text/css">
body {
padding: 40px;
}
</style>
</head>
<body>
<form class="form-inline">
<select id="s1" class="selectpicker" name="s1">
<option value="1">hoge</option>
<option value="2">foo</option>
<option value="3">bar</option>
</select>
<button id="hoge" class="btn btn-primary">Get Value</button>
</form>
<input id="t1" type="text" readonly />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="vender/bootstrap/js/bootstrap.min.js"></script>
<script src="vender/bootstrap-select/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//enable bootstrap-select
$(".selectpicker").selectpicker();
//click hoge button
$("#hoge").click(function(){
$("#t1").val($("#s1").val());
return false;
});
});
</script>
</body>
</html>
今、開発中のアプリで使おうかと思ったけど Internet Explorer 7だとちょっと表示が変だったので、 今回はbootstrap標準のselectタグを使う。
