Select2で1つだけしか選択できないようにする

# はじめに
今まで複数選択OKの利用シーンでのみSelect2を使っていたが、単一選択のケースでも利用する要件がありそうなので、調べたメモ

# 環境
- Select2 4.0.X

# 方法
 [jQuery Select2 で上限ありの複数選択](
https://r17n.page/2019/11/11/jquery-select2-multiple-select-with-limit/) に従って```maximumSelectionLength```プロパティに1を設定すればよいかと思ったが、難しく考えず [Single select boxes](https://select2.org/getting-started/basic-usage) のようにmultiple="multiple" の設定を**しなければよい**だけであった。

ただ、Singleの場合、``` allowClear: true ```の設定をした際に表示される X ボタンが**なぜか利かない**現象に見舞われたので、クリアさせたい場合、自前でクリアボタンをつける等しよう。

# サンプル
以下にサンプルを示す。いつものように都道府県選択ネタで進める。

```javascript
<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つの候補しか選択できない状態となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/f27dea24-9345-9076-eab6-0f6863d13b43.png)

選択後、ボックスの中に選択したものが表示される。別の候補を選択すると置き換わる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/d2107774-70a9-f213-b0dd-41e44d0e0953.png)

ここでボックスの右側のXボタンをクリックしても**何もおこらない**が、自前で実装したclearボタンをクリックするとボックスがクリアされるはずだ。

# おわりに
Qiitaのタグ設定機能、何気に秀逸ですね。

# 参考
- [jQuery Select2 で上限ありの複数選択](
https://r17n.page/2019/11/11/jquery-select2-multiple-select-with-limit/)
- [Single select boxes](https://select2.org/getting-started/basic-usage)