javascript - 从 javascript 或 jquery 更新 spring 模型值

Question

我将 Spring mvc、javascript、jquery、ajax 和 HTML 与 Thymeleaf 一起使用，并通过 Model 将值从 Controller 传递到 HTML 页面。使用 Model 我在提供的名称下添加提供的属性。

model.addAttribute("carTypeList",fleetAndCarService.getCarsType());

我在带有选择标记的表单中使用此值。在 HTML 代码中我有:

<form id="addCarForm" role="form" action="#" th:action="@{/fleetAndCar/car}" th:object="${carForm}" method="post">
    <div class="box-body">
        <div class="form-group">
            <div class="form-group">
                <label>Fleet application</label>
                <!-- Show fleet application -->
                <input class="form-control" type="text"
                    th:value="${fleetApplication.application}"
                    readonly="readonly" />
                <!-- Save into fleet the value of idFleet -->
                <input type="hidden" name="fleet"
                    th:value="${fleetApplication.idFleet}" />
            </div>
        </div>
        <div class="form-group">
            <div class="radio">
                <label> <input type="radio" name="optionsRadios"
                    onclick="existingCar();" checked> Use existing car
                    type
                </label>
            </div>
            <div class="radio">
                <label> <input type="radio" name="optionsRadios"
                    onclick="newCar();"> Create new car type
                </label>
            </div>
        </div>
        <div class="form-group" id=existingCarType>
            <label>CarType</label> <select class="form-control select2"
                style="width: 100%;" th:field="*{carType}">
                <option th:each="carType: ${carTypeList}"
                    th:value="${carType.idCarType}"
                    th:text="${carType.idCarType}"></option>
            </select>
        </div>
        <div class="form-group" id=newCarType style="display: none;">
            <label>CarType</label> <input id=carTypeText
                th:field="*{carType}" type="text" class="form-control"
                placeholder="New car Type" disabled>
        </div>
    </div>
</form>

但是在这个表单页面中，用户可以选择或添加一个 carsType，这样下次他查看所有 carsType 时，他就不会找到最后创建的，直到他不刷新页面。有没有办法从 javascript、HTML 或其他方式获取更新后的值来更新此模型值？谢谢

Answer 1

您可以使用.change()方法。 https://api.jquery.com/change/

每次用户更改选择框时，此事件监听器都会运行。

这是一个示例:https://jsfiddle.net/robbroden/m8doezdq/

HTML

<select id="selectElement">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>

JS

var value;

$('#selectElement').change(function(){
    value = $('#selectElement').val();
    alert(value);
});