如何在Spring + Thymeleaf中将所选值转换为输入值（作为对象）？

Question

视图：modAnimal.html（这是视图的第一部分，它的隐藏div中有输入值）

<form th:action="@{/animales/preModAnimal}" th:object="${animal}" method="post" enctype="multipart/form-data" id="formPreModAnimal">

                    <!-- INPUT TIPO DE ANIMAL -->

                    <label>Animal</label>
                            <input type="radio" th:field="*{tipo}" th:value="*{tipo.PERRO}" required /> 
                            <label>🐕</label>

                            <input type="radio" th:field="*{tipo}" th:value="*{tipo.GATO}" required /> 
                            <label>🐈</label>

                    <!-- INPUT SEXO DEL ANIMAL -->

                    <label>Sexo</label>
                            <input type="radio" th:field="*{sexo}" th:value="*{sexo.MACHO}" required /> 
                            <label>♂️</label>

                            <input type="radio" th:field="*{sexo}" th:value="*{sexo.HEMBRA}" required /> 
                            <label>♀️</label>


                    <!-- INPUT SELECT ANIMAL -->

                    <label for="selectAnimal">Animal</label>

                        <select th:fragment="animales" id="selectAnimal" required
                            class="form-control">
                            <option value="" selected="selected">Selecciona animal</option>
                            <option th:each="i : ${animales}"
                                th:text="${i.emojiTipo} + ' ' + ${i.emojiSexo} + ' - ' + ${i.nombre} + ' - ' + ${i.raza} + ' - ' + ${i.provincia.provincia} + '  (' + ${i.poblacion} + ')'"
                                th:value="${i.id}"></option>
                        </select>

            </form>

取决于所选择的无线电，选择下拉菜单将加载所需的值。这是通过jQuery完成的

funcionesCheck_jQuery.js

$(document).ready(function() {
  $('[name=tipo], [name=sexo]').change(function() {

    $("#selectAnimal").load('/animales/checktiposexo', $('#formPreModAnimal :input[type=radio]').serialize());

  });
});

这是控制器

AnimalesController.java

        @GetMapping("/modAnimal") public String pagMod(Model model) {

    Animal animal = new Animal();
    model.addAttribute("animal", animal);

    Sexo[] opcionesSexo = Sexo.values();
    model.addAttribute("sexos", opcionesSexo);

    Tipo[] opcionesTipo = Tipo.values();
    model.addAttribute("tipos", opcionesTipo);

    return "animales/modAnimal";
}

@GetMapping("/checktiposexo")
public String filtroTipoSexo(Model model, @RequestParam(name = "tipo", required = false) Tipo tipo,
        @RequestParam(name = "sexo", required = false) Sexo sexo) {

    List<Animal> listaAnimales;

    if (tipo == null && sexo == null) { // not working, i wanted this to act different, but nvm
        listaAnimales = animalesRepo.findAll();
        model.addAttribute("animales", listaAnimales);
    } else if (tipo != null && sexo == null) {
        listaAnimales = animalesRepo.findAllAnimalesByTipoOrSexo(tipo, sexo);
        model.addAttribute("animales", listaAnimales);
    } else if (tipo == null && sexo != null) {
        listaAnimales = animalesRepo.findAllAnimalesByTipoOrSexo(tipo, sexo);
        model.addAttribute("animales", listaAnimales);
    } else {
        listaAnimales = animalesRepo.findAllAnimalesByTipoAndSexo(tipo, sexo);
        model.addAttribute("animales", listaAnimales);
    }

    return "animales/modAnimal :: animales"; //I'm returning animales as fragment

}

然后，我要用在帖子开头提到的所选选项在同一视图中>]中给出的值来填充一些输入值。

每次选择的选项更改时，这些输入将再次显示。它们位于最初在开始时隐藏的div（#modificarOculto）中。

funcionesCheck_jQuery.js

$(document).ready(function() { 
$( "#modificarOculto" ).hide();
$("[name=tipo], [name=sexo], #selectAnimal").change(function() {
    $('#modificarOculto').hide('300');
    $("#selectAnimal").change(function() {

    inputSelectAnimal = $("#selectAnimal")[0];
    selectAnimal = $("#selectAnimal").val();

    if(selectAnimal>0){
    $('#modificarOculto').show('slow');


    }else if(selectAnimal==0){
        $('#modificarOculto').hide('slow');
    }


    });
});
});
[请记住，这是开始时视图下方的视图部分。我想在这些输入中加载选定的值。 

modAnimal.html

（再次）

        <div class="row cajita" id="modificarOculto">

            <form th:action="@{/animales/modAnimal-submit}" id="formModAnimal"
                th:object="${animal}" method="post" enctype="multipart/form-data">

                    <label >Nombre</label>
                        <input type="text" th:field="*{nombre}"  class="form-control"
                            placeholder="Nombre del animal" required minlength=3
                            maxlength=50 />

                    <label>Animal</label>
                            <input type="radio" th:field="*{tipo}" th:value="*{tipo.PERRO}"required /> 
                            <label>🐕</label>

                            <input type="radio" th:field="*{tipo}" th:value="*{tipo.GATO}" required /> 
                            <label>🐈</label>


                    <label>Sexo</label>
                            <input type="radio" th:field="*{sexo}" th:value="*{sexo.MACHO}" required /> 
                            <label>♂️</label>

                            <input type="radio" th:field="*{sexo}" th:value="*{sexo.HEMBRA}" required /> 
                            <label>♀️</label>

                    <!-- INPUT PROVINCIA ANIMAL -->

                    <label>Provincia</label>
                        <select id="provincia" name="provincia" required>
                            <option value="">Load the selected provincia</option>
                            <option th:each="i : ${provincias}" th:text="${i.provincia}"
                                th:value="${i.id}">
                        </select>

                        <button type="submit" id="botonModificar">Modificar</button>

            </form>
        </div>
我知道我需要一个表单来提交新值（“ formModAnimal”），但是...我知道我不需要Begin（表单）形式（“ formPreModAnimal”）。我真的不知道是否需要将整个视图（选择部分+输入部分）合并到一个表单中。 

如何将数据作为对象值从选定值发送到输入值？ Thymeleaf有什么聪明的方法吗？我可以将选定的值与片段相关联，并将其发送给“ formModAnimal”形式并将其用作animal.attribute吗？那会很舒服。

您将如何做？

为了方便您的概述，我删除了所有的引导div和类。希望一切对您都清楚！

谢谢！

View：modAnimal.html（这是视图的第一部分，在隐藏的div中有输入值之后））

Answer 1

好的，我已经解决了。