ver.2サポートサイト

サイトのフォーム上でセレクト項目を絞って表示したい

フォーム上のソースを編集することで、セレクトフィールドの選択肢の一部を表示することができます。

※　サンプルソースの「fXXXX」の部分は、対象のセレクトフィールドの値を挿入してください。

範囲指定の場合

　セレクトの例（ID1～3のみ）

<select class="sp-form-control" name="fXXXX">
  <option th:each="option : ${fields['fXXXX'].options}" th:if="${option.id} ge 1 and ${option.id} le 3
" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['fXXXX'] == #strings.toString(option.id)}">Item</option>
</select>

　マルチセレクトの例（ID4～6のみ）

<label class="sp-form-control sp-form-selection" th:each="option : ${fields['fXXXX'].options}" th:if="${option.id} ge 4 and ${option.id} le 6">
  <input type="checkbox" th:name="fXXXX" th:value="${option.id}" th:checked="${inputs['fXXXX'] != null ? #lists.contains(inputs['fXXXX'], #strings.toString(option.id)) : false}">
  <span class="sp-form-selection-label" th:text="${option.label}">Item</span>
</label>

個別指定の場合

<select class="sp-form-control" name="fXXXX">
  <option th:each="option : ${fields['fXXXX'].options}" th:if="${option.id} == 1 or ${option.id} == 4 or ${option.id} == 6" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['fXXXX'] == #strings.toString(option.id)}">Item</option>
</select>

　マルチセレクトの例（ID2,3,5,7,11,13を出力）

<th:block th:with="inc=${ {2, 3, 5, 7, 11, 13} }">
  <label class="sp-form-control sp-form-selection" th:each="option : ${fields['fXXXX'].options}" th:if="${#lists.contains(inc, option.id)}">
    <input type="checkbox" th:name="fXXXX" th:value="${option.id}" th:checked="${inputs['fXXXX'] != null ? #lists.contains(inputs['fXXXX'], #strings.toString(option.id)) : false}">
    <span class="sp-form-selection-label" th:text="${option.label}">Item</span>
  </label>
</th:block>