入力画面、プルダウンリストとマルチセレクトボックスを使う。STS ／Spring Boot／thymeleaf

単一選択のSELECTボックス（プルダウンリスト）と、複数選択可能なマルチSELECTボックスを配置した画面の処理をやります。

STS3(3.9.6)＋SpringBoot2.0＋Tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

前回までの画面にこの２つを追加する形でやります。

arakan-pgm-ai.hatenablog.com

コントローラクラスとかは同じものを使い、変更のあった部分のみ書いてます。

そのため、例えば実行ボタンを押したあとで呼び出されるコントローラクラスのメソッドなど、変更のないものは書いていません。

Formクラス

選択された値を受け取るString型を定義します。当たり前ですけど、複数受け取る可能性がある時は、Stringの配列になります。

	private String selectedItem;

	public String getSelectedItem() {
		return selectedItem;
	}

	public void setSelectedItem(String selectedItem) {
		this.selectedItem = selectedItem;
	}
	private String[] selectedItems;

	public String[] getSelectedItems() {
		return selectedItems;
	}

	public void setSelectedItems(String[] selectedItems) {
		this.selectedItems = selectedItems;
	}

2018/03/12追記

＞上記の例の記載方法を変更しました。

＞MathJax.jsを導入してから、一部のソースサンプルが数式と解釈されて欠落してしまう現象が発生していたためです。

コントローラクラス

選択肢として表示する値は、Controllerクラス側に書きます。

private Map<String,String> getSelectedItems(){
     Map<String, String> selectMap = new LinkedHashMap<String, String>();
     selectMap.put("key_A", "選択肢Ａは、これですよ");
     selectMap.put("key_B", "選択肢Ｂは、これですよ");
     selectMap.put("key_C", "選択肢Ｃは、これですよ");
     selectMap.put("key_D", "選択肢Ｄは、これですよ");
     selectMap.put("key_E", "選択肢Ｅは、これですよ");
     return selectMap;
 }

Mapオブジェクトを生成し、そこにセットして返すメソッドを用意します。

実際の処理だと、セットするデータはDBなどから取得することになりますが、考え方は一緒です。

 @RequestMapping(value = "/hello3", method = RequestMethod.GET)
 public String index(Hello3Form form, Model model) {
      model.addAttribute("titleMsg",   messageSource.getMessage("hello3.title", null, Locale.JAPAN));
       model.addAttribute("selectItems",getSelectedItems());
      return "hello3";
 }

生成したMapデータを、AddAttributeで、selectItemsという名前で紐付けます。

HTML＋Tymeleaf

2パターンです。

単一選択

単一選択のSELECTボックス（プルダウンリスト）です。

<option>の数は固定できないので、th:eachを指定してループを回してセットします。

先程のselectItemsから１つずつ取り出し、itemで受けて、そのkeyとvalueをセットしていきます。

<select id="singleSelect" name="selectedItem">
<option value="">---</option>
<option th:each="item : ${selectItems}" th:value="${item.value}" th:text="${item.value}" th:selected="${item.value} == *{selectedItem}">singleSelect</option>
</select>

複数選択

こちらは、複数選択可能なマルチセレクトです。

th:field="*{selectedItems}">で、Formで定義した選択結果を受け取るString配列との紐付けを行います。

<select id="multiSelect" name="selectedItems" multiple="multiple" size="6">
<option value="">---</option>
<option th:each="item : ${selectItems}" th:value="${item.value}" th:text="${item.value}" th:field="*{selectedItems}">multiSelect</option>
</select>

画面の表示例です。

シングルSELECT（プルダウン）です。左側が閉じた状態、右が開いた状態です。

f:id:arakan_no_boku:20170317220403j:plain

こちらはマルチセレクトの方です。Ctrl＋クリックで、選択肢Bと選択肢Dの２つを選択してみます。

f:id:arakan_no_boku:20170317220843j:plain

結果を表示するHTMLと表示例

実行ボタンを押した結果を表示する画面のHTMLです。

  <div th:object="${hello3Form}">
     <p class="msg" th:text="*{selectedItem}"></p>
     <p th:each="sel : *{selectedItems}" th:text="${sel}"></p> 
</div>

マルチセレクトの場合（下）は、複数ですから、th:eachでループを回して表示します。

f:id:arakan_no_boku:20170317222033j:plain