如何将所选 <option> 元素的 id 分配给另一个变量以进行进一步处理？百里香叶答案

【问题标题】：How to assign the id of a selected <option> element to another variable for further processing ? ThymeLeaf如何将所选 <option> 元素的 id 分配给另一个变量以进行进一步处理？百里香叶
【发布时间】：2019-04-03 14:47:34
【问题描述】：

我正在完全编辑原始问题，我在这篇文章中得到了答案，给了我一些指导：

我有这个 ThymeLeaf 模板：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/app.css}" />
</head>
<body>
<div class="container">
    <select name="gustos" id="selectGustos">
        <option th:each="gusto : ${gustos}" th:text="${gusto.nombre}" th:value="${gusto.id}"> </option>
    </select>
    <div class="row delete">
        <div class="col s12 l8">
            <form th:action="@{'/gustos/' + ${gusto.id} + '/delete'}" method="post">
                <button type="submit" class="button">Borrar</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

在<form> 中，我正在使用变量 ${gusto.id} 发布帖子，该变量未绑定到任何东西（并且无法正常工作）。

我需要做的是将选定的<option> 的 id 值绑定到表单的 ${gusto.id} 变量，以便我的控制器知道需要删除哪个 id。

所以基本上我需要选定的<option>（它将是 Gusto 类型的对象）的 id 属性在我的<form> 中传送到我的控制器。

控制器期望一个 int 作为 id !!

【问题讨论】：

您需要在您的操作网址th:action="@{/gustos/{id}/delete(id=${gusto.id)}" 中添加一个参数，类似这样。
感谢您的回答...现在我收到此错误：无法解析为表达式：“@{/gustos/{id}/delete(id=${gusto.id)} " (deleteGusto:18)
问题是您的form 不在th:each 内...所以您可能需要一些javascript 或制作表单的选择部分并提交id 以删除为一个参数，而不是作为路径的一部分。
谢谢老哥，已经解决了:)

标签： java spring spring-mvc thymeleaf

【解决方案1】：

您始终可以为此使用jquery。事实上，我相信这将是您当前问题的最简单的解决方案。这样，您将始终在操作 url 中拥有正确的 id。

$('#selectGustos').on('change', function() {
  var value = $(this).val();
  $('#gustosForm').attr('action', 'gustos/' + value + '/delete');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/app.css}" />
</head>
<body>
<div class="container">
    <select name="gustos" id="selectGustos">
        <option value="-1" selected="selected">Escoger Gusto</option>
        <option th:each="gusto : ${gustos}" th:text="${gusto.nombre}" th:value="${gusto.id}"> </option>
    </select>
    <div class="row delete">
        <div class="col s12 l8">
            <form id='gustosForm' th:action="@{'/gustos/' + ${gusto.id} + '/delete'}" method="post">
                <button type="submit" class="button">Borrar</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

我在您的表单中添加了id，以便更容易获取它的值。还有一件事，你应该在你的选择的开头添加一个默认选项，这样用户就不会选择错误的值。

【讨论】：

这才是我想要的！！我会尝试一下！谢谢艾伦
希望它有效！如果您还需要什么，请告诉我！

【解决方案2】：

像这样添加th:action="@{/gustos/{id}/delete(id=${gusto.id})}"。

参考thymeleaf-construct-url-with-variable和standardurlsyntax-thymeleaf

【讨论】：

感谢您的回答...现在我收到此错误：无法解析为表达式：“@{/gustos/{id}/delete(id=${gusto.id)} " (deleteGusto:18)
谢谢兄弟...现在我有这个错误：异常评估SpringEL表达式：“gusto.id”（deleteGusto：18）！为什么这么反逻辑？
在
我猜是因为它不知道我指的是哪个 id。因为
您可以创建一个外部 div，用于选择和形成两者。所以在那个div里面迭代gustos。

【解决方案3】：

th:onclick="'javascript:consultar();'"

<script type="text/javascript"> 
   function consultar() {

  var gustoId = $("#selectGustos option:selected").val();

    $.ajax({

        url: "/gustos/"+ gustoId + "/delete}",
        success: function(response) {

        }
    });         
}
</script>`

【讨论】：

谢谢，更新了问题，因为问题不存在
对不起，我不明白问题出在哪里。您的选择是否正常工作？
是发送表格的问题吗？
是的，问题是发送表单，其中所选选项的 id 是使其动态的变量！
我需要获取所选选项的 id，然后在 th:action 中将其连接起来，使其在帖子中传播