Обновление Thymleaf <select><option> с использованием ajax - PullRequest
Новая
       17

Обновление Thymleaf <select><option> с использованием ajax

0 голосов
/ 10 марта 2019

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

Когда выбирается первый выбор, я делаю 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);
        }

    });

}
/*]]>*/

Консоль.log () значение: <option value="0">Nokia</option> <option value="1">Samsung</option>

...