HTMLでfor文を使用したときにうまくセレクトボックスが表示できない

Question

前提・実現したいこと

Javaから渡されたリストをセレクトボックスに表示したいです。

発生している問題・エラーメッセージ

テキストのないセレクトボックスが作成されてしまいます。

試したこと

①まず最初にリストが渡されることを確認するため下記のように記述しました。

<div>
	<select id="sample" name="example" size="5" ondblclick="myFnc();"
		style="width: 100%">

		<option th:value="${list[0]}" th:text="${list[0]}"></option>
		<option th:value="${list[1]}" th:text="${list[1]}"></option>
		<option th:value="${list[2]}" th:text="${list[2]}"></option>

	</select>
</div>

すると、期待通りに以下のセレクトボックスが生成されました。

②次に同じことを今度はfor文でリストの数だけ回して記述しようとしました。
(本当はlist[i]としたかったのですが、まずはきちんと表示されるのを確認するために下記のようにしています)

<div>
	<select id="sample" name="example" size="5" ondblclick="myFnc();"
		style="width: 100%">

		<script type="text/javascript">
			for (var i = 0; i < 10; i++) {
				document.write("<option th:value=\"${list[0]}\" th:text=\"${list[0]}\"></option>");
			}
		</script>

	</select>
</div>

しかし、結果は文字列が何もないセレクトボックスが生成されていました。
項目数は10個ありました。

③最後にエスケープなどの記述の仕方がおかしかったのではないかと思い、もう一段階簡単なfor文を試しました。

<div>
	<select id="sample" name="example" size="5" ondblclick="myFnc();"
		style="width: 100%">

		<script type="text/javascript">
			for (var i = 0; i < 10; i++) {
				document.write("<option value=\"選択肢1\">sample1</option>");
			}
		</script>

	</select>
</div>

今度は期待通り文字列の表示されたセレクトボックスが生成されました。

③からエスケープの仕方は間違っていないと思うのですが、なぜ②がうまくいかないのでしょうか？

補足情報（FW/ツールのバージョンなど）

bootstrap4

Answer 1

なぜ②がうまくいかないのでしょうか？

テンプレートエンジンに任せる仕事内容に着目すると違いがあります。

① はマークアップ文書内の要素が持つ属性を展開
② は javascript を展開
③ は展開する必要のない javascript

Thymeleaf は使ったことはないので、明確な回答はできませんが、「JavaScript の展開方法が求められる箇所で マークアップ文書の展開方法を期待して記述した」という印象を受けます。

---

ja - Thymeleaf のセクションに目を通すと以下の項目があります。

• 6 「繰り返し処理」
• 12.3 「高度なインライン評価とJavaScriptシリアライゼーション」

ヒントになりそうでしょうか。

後者の、javascript 変数に配列が渡されるようにすると、javascript が素直な処理として書けそうです。

Comments

[moshi]

回答ありがとうございます。

ThymeleafとJavascriptがごっちゃになってたみたいです。
これでは動かないですねｗ

ヒントとして頂いた繰り返し処理を元に解決ができました。
<select id="sample" name="sample" size="5" style="width: 100%"
th:ondblclick="myFnc();">
<option th:each="list : ${list}" th:value="${list}"
th:inline="text">[[${list}]]</option>
</select>
で期待する動作となりました。
ありがとうございます。