javascript - Thymeleaf + Javascript 选择选项更改

问题描述

我想选择一个元素列表，根据选择我调用一个函数 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); 没变。怎么了？

标签： javascriptthymeleafjquery-select2

如果您从控制器返回一个 Thymeleaf 片段，那么您将获得一个 html 代码。所以，val()行不通。你需要使用append(data). 现在我看不到您的控制器或元素所在的$('#zips')位置，所以我假设这就是您发送的内容。

如果您要发送实体列表，则需要使用$.each(data, function() { // Do something });将每个实体作为选项添加到您的选择中。

javascript - Thymeleaf + Javascript 选择选项更改

问题描述

解决方案

推荐阅读