Блог

У меня есть два варианта выбора. Я хочу изменить второе значение параметров выбора на основе значения первого параметра. Я использую thymleaf в качестве движка шаблонов.

Когда выбирается первый select, я выполняю ajax-вызов контроллера и получаю значение в виде списка. Я получаю значение из вызова ajax, но не смог добавить значение ко второму варианту выбора. console.log() корректно отображает значение параметра, но не обновляет HTML-код.

Сначала выберите опцию:

  <select id="brand" th:onchange="changeBrand()" class="form-control">
   <option th:selected="true" th:disabled="true"
           th:text="'Please Select A Brand'"></option>
   <option th:each="brand : ${Calculator}"
           th:value="${brand}"
           th:text="${brand}">Choose Brand</option>
 </select>
  

Второй выбор:

 <div class="input-group">
  <select id="model" class="form-control">
    <option th:selected="true" th:disabled="true"
            th:text="'Please Select A Model'"></option>
  </select>
</div>
  

Ajax:

 <script th:inline="javascript">
/*<![CDATA[*/
function changeBrand() {
    var selectedBrand = $( "#brand option:selected" ).text();

    $.ajax({
        url:"duty/getAllModel",
        data:{brand:selectedBrand},
        type:"POST",
        success:function(data){

            // Resetting select option
            var select = document.getElementById("model");
            select.options.length = 0;

            options = data.options;
            for (var i = 0; i < data.length; i  ) {
                select.options[select.options.length] = new Option(data[i],i);
            }
            for (var i = 0; i < select.childElementCount; i  ) {
                console.log(select.options[i]);
            }

        },error:function (error) {
            console.log(error);
        }

    });

}
/*]]>*/
  

Значение Console.log():`

Nokia Samsung`