Изменение выбора Thymeleaf + Javascript

Question

Изменение выбора Thymeleaf + Javascript

1

Я хочу выбрать список элементов, основанный на выборе. Я вызываю функцию api, которая дает мне список данных, чтобы вставить второй выбор.

Вызов работает нормально, я пытаюсь предупредить результат, но мне нужно изменить значение второго выбора, и я терпит неудачу. Я использую select2.

Это моя страница THYMELEAF:

   <form id="updateD" data-parsley-validate class="rounded px-2 py-2 mt-3" th:action="@{/ditta/upd}" th:method="POST" th:object="${ditta}">

<div class="row" th:if="*{codice==null or codice.isEmpty()}">
                    <div th:replace="~{/tags/input :: inputNorm(indirizzo, *{indirizzo}, text, true, '')}"></div>
                    <div th:replace="~{/tags/select :: selectValue(city, *{city}, ${cities}, false)}"></div>
                    <div th:replace="~{/tags/select :: selectValue(zip, *{zipCode}, ${zips}, false)}"></div>
                </div>
</form>

Код JS:

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
        var token = $('#_csrf').attr('content');
        var header = $('#_csrf_header').attr('content');

        $(function(){

            $('#city').change(function(){
                handleComune($('#city').val());
            });

            $('.sel2').select2({
                theme: "bootstrap"
            });
        });

        function handleComune(city){
            $.ajax({
                type: 'GET',
                 url:[[ @{'/api/extractZip?city='}]]+city,
                 beforeSend: function(xhr) {
                   xhr.setRequestHeader(header, token);
               },
               success : function(data) {
                   $('#zips').val(data);
                   alert(data);
               }
            });
        }

    /*]]>*/
    </script>

Основываясь на выборе города, я извлекаю список zipcode.

Фрагментами выбора являются следующие:

    <div th:fragment="selectValue(name, selected, values, required)" class="col form-group" th:switch="${required}">

        <label th:text="${required} ? #{${name}}+'*' : #{${name}}" th:for="${name}" class="control-label"></label>

<div class="col form-group">
            <select th:name="${name}" th:id="${name}" class="form-control sel2" th:required="${required}">
                <option value=""></option>
                <th:block th:each="v : ${values}">
                    <option th:value="${v}" th:text="${v}" th:selected="${selected} eq ${v}"></option>
                </th:block>
            </select>
        </div>

    </div>

$ ('# Zips'). Val (данные); не изменить. Что не так?

Apo 25 окт. 2018, в 11:33

Источник

Теги:

javascript

jquery-select2

thymeleaf

2 ответа

Ещё вопросы

Apo · Answer 1 · 2018-10-26T04-28-00.000Z

После нескольких попыток я решил так:

 function handleComune(city){
            $.ajax({
                type: 'GET',
                 url:[[ @{'/api/extractZip?city='}]]+city,
                 beforeSend: function(xhr) {
                   xhr.setRequestHeader(header, token);
               },
               success : function(data) {
                   $('#zip').empty();
                       var arrayCap = data.toString().split(",");

                       for (a in arrayCap ) {
                           var newOption = new Option(data[a], data[a], false, false);
                           $('#zip').append(newOption).trigger('change');
                        }
               }
            });
        }

Мне нужно разделить мои данные, потому что ответ представляет собой строку данных, разделенных запятыми.

Теперь он отлично работает!

Alain Cruz · Answer 2 · 2018-10-25T23-21-00.000Z

Если вы возвращаете фрагмент Thymeleaf из своего контроллера, вы получите код html. Таким образом, val() не будет работать. Вам нужно использовать append(data). Теперь я не вижу вашего контроллера или где находится элемент $('#zips'), поэтому я предполагаю, что это то, что вы отправляете.

Если вы отправляете список сущностей, вам нужно будет использовать $.each(data, function() {//Do something }); для добавления каждого объекта в качестве опции в ваш выбор.

Привет, Ален, я решил после напряженного дня, проведенного в попытках, попытках и попытках снова. Ваш ответ частично правильный. Я решил использовать этот код: `success: function (data) {$ ('# zip'). Empty (); var arrayCap = data.toString (). split (","); for (a в arrayCap) {var newOption = new Option (data [a], data [a], false, false); $ ( '# Почтовый') добавляет (newOption) .trigger ( 'изменить'). }} `