Thymeleaf+Javascript选择选项更改

我想选择一个元素列表，基于我调用的函数api，它给我一个数据列表，插入到第二个选择中

调用工作正常，我尝试提醒结果，但我需要更改第二个选择的值，结果失败。 我正在使用select2

这是我的百里香页面：

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列表

select的片段如下所示：

    <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'.valdata；不要改变。

---

怎么了

如果您正在从控制器返回Thymeleaf片段，那么您将得到一个html代码。所以，瓦尔不工作了。您需要使用appenddata。现在我看不到您的控制器，也看不到元素$'zips'的位置，所以我假设这就是您要发送的内容

---

如果要发送实体列表，则需要使用$.eachdata，函数{//Do something}；要将每个实体作为选项添加到您的选择中。

经过多次尝试后，我用以下方法解决了此问题：

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

我需要分割数据，因为响应是由逗号分隔的数据字符串

---

现在它工作得很好

嗨，阿兰，经过一个紧张的下午的努力，我终于解决了这个问题。你的回答部分正确。我使用以下代码解决了这个问题：`success:functiondata{$'zip'.empty；var arrayCap=data.toString.split，；对于arrayCap中的a{var newOption=newoptiondata[a]，data[a]，false，false；$'zip'.appendnewOption.trigger'change'；}`

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