Thymeleaf + Javascript選擇選項更改

Question

我想選擇一個元素列表，根據選擇，我調用一個函數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>

根據城市的選擇，我提取了一個郵政編碼列表。

選擇的片段如下：

    <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（data）; 沒變。 怎么了？

Answer 1

如果從控制器返回Thymeleaf片段，則將獲得html代碼。 因此， val()無法正常工作。 您需要使用append(data) 。 現在，我看不到您的控制器或元素$('#zips')所在的位置，因此我假設這就是您要發送的內容。

如果要發送實體列表，則需要使用$.each(data, function() { // Do something }); 將每個實體作為選項添加到您的選擇中。

Answer 2

經過幾次嘗試，我解決了這種方式：

 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');
                        }
               }
            });
        }

我需要拆分數據，因為響應是用逗號分隔的數據字符串。

現在，它可以完美運行了！