はじめに
今まで複数選択OKの利用シーンでのみSelect2を使っていたが、単一選択のケースでも利用する要件がありそうなので、調べたメモ
環境
- Select2 4.0.X
方法
jQuery Select2 で上限ありの複数選択 に従ってmaximumSelectionLengthプロパティに1を設定すればよいかと思ったが、難しく考えず Single select boxes のようにmultiple="multiple" の設定をしなければよいだけであった。
ただ、Singleの場合、allowClear: trueの設定をした際に表示される X ボタンがなぜか利かない現象に見舞われたので、クリアさせたい場合、自前でクリアボタンをつける等しよう。
サンプル
以下にサンプルを示す。いつものように都道府県選択ネタで進める。
<html>
<head>
<link href="https://code.jquery.com/jquery-3.2.1.min.js" rel="stylesheet" />
<link href="./select2/css/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./select2/js/select2.js"></script>
</head>
<script>
function clear_form(){
$(".js-example-basic-single").val(null).trigger("change");
}
</script>
<body>
<form>
<input type="button" onclick='javascript:clear_form();' value="clear">
<select class="js-example-basic-single" name="state" style="width:100%">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</form>
</body>
<script language="JavaScript">
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2({
allowClear: true, // xボタンは表示されるが、クリックしても効かない
}
);
});
</script>
するとmultipuleを設定した場合と異なり、入力エリアが最初のボックスの下に表示され、入力に従い表示される候補エリアでは、1つの候補しか選択できない状態となる。
選択後、ボックスの中に選択したものが表示される。別の候補を選択すると置き換わる。
ここでボックスの右側のXボタンをクリックしても何もおこらないが、自前で実装したclearボタンをクリックするとボックスがクリアされるはずだ。
おわりに
Qiitaのタグ設定機能、何気に秀逸ですね。