Thymeleaf: Как изменить внутренний HTML с помощью JavaScript?

Question

У меня есть форма, содержащая два поля выбора. Когда пользователь выбирает параметр в поле 1, параметры, отображаемые в поле 2, должны соответственно изменяться.

Я пытаюсь реализовать это поведение, используя комбинацию thymeleaf и javascript. Самое большее, что я сделал, пока дано здесь:

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
   for="first-name"> Compte <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
   <select class="form-control"
      th:field="*{Compte.Etablissement}" id="selected"
      onchange="reload()">
      <option id="selectedOption"
         th:each="etablissement : ${etablissements}"
         th:text="${etablissement.name}"
         th:value="${etablissement}">Choose Etablissement</option>
   </select>
   <script th:inline="javascript">
      /*<![CDATA[*/

      function reload() {

          $var = document
                  .getElementById("selected").options[document
                  .getElementById("selected").selectedIndex].text;
          document
                  .getElementById("imput").innerHTML = '<option th:each="account : ${accounts}"  th:text="${account.owner}" th:value="${account.id}"/>';
          alert("Check");

      }
      /*]]>*/
   </script>
</div>
<div class="form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12"
      for="first-name"> Imputation <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12" id="toRef">
      <select class="form-control" id="imput" name="imput">
         <option th:each="account : ${accounts}"
            th:if="${account.Etablissement.name} == 'myEstablishment'"
            th:text="${account.owner}" th:value="${account.id}" />
      </select>
   </div>
</div>

Конечной идеей здесь было сделать что-то вроде этого:

document.getElementById("imput").innerHTML = 
'<option th:each="account : ${accounts}"  
th:if="${account.Etablissement.name} == '+$var+'"
th:text="${account.owner}" 
th:value="${account.id}"/>';

Где, как вы можете видеть во встроенном скрипте, $ var представляет значение параметра, выбранного в поле 1.

Поэтому, в зависимости от значения этого поля, я хочу выполнить итерацию во втором поле выбора только через атрибуты, которые проверяют условие: th: if = "$ {account.Etablissement.name} == '+ $ var +'"

Здесь следует обратить внимание, и причина, по которой я не включил это непосредственно в свой встроенный скрипт, заключается в том, что он даже не работает без условия. Это означает, что страница не загружает параметры во втором поле выбора, когда я изменяю выбор поля 1, она загружает только один пустой параметр.

Любая идея, как это исправить, или если у вас есть, как я уверен, есть лучший способ сделать это, я бы очень быстро рассмотреть это.