Question

我正在开发Spring Boot + Thymeleaf项目。我有side-bar.html个文件，其中的片段用于其他HTML文件以避免重写代码。

side-bar.html中有一个选择元素，其中填充了客户ID。

<div id="sidebar-menu" th:fragment="side-bar-menu">
    <select id="clientId" name="clientId" class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="setCltVal(this);">
            <option value="">Choose or Type Client code</option>
            <option th:each="aclient : ${session.assignedClientList}" th:value="${aclient.cltcd+'|'+aclient.cname}" th:text="${aclient.cltcd+' - '+aclient.cname}"></option>
    </select>
</div>

我已将此片段包含在index.html文件中。

<!-- sidebar menu -->
<div th:replace="fragments/side_bar :: side-bar-menu"></div>

现在，当我选择任何 select 选项将它们保存在会话对象中时，我正在尝试进行ajax调用。为此，我在index.html中提供了一个js脚本。

<script th:inline="javascript">
console.log($('#clientId'));
function setCltVal() {
    var clientData = $("#clientId option:selected");
    $.ajax({
        type: "POST",
        url: "setClientData",
        data: "clientData="+clientData,
        success: function(response){
            ...
           },
        error: function(error){
            ...
           }
        });
    }
</script>

但是当选择了select选项时，永远不会调用此脚本。

我也试过这个：

<script type="text/javascript">
$('#clientId').on("change", function() {
    var clientData = $("#clientId").val();
    $.ajax({
        type: "POST",
        url: "setClientData",
        data: "clientData="+clientData,
        success: function(response){
           ...
          },
        error: function(error){
           ...
          }
        });
    });
</script>

我希望通过此代码实现的目标是：选择任何选择选项时，将调用脚本，该脚本对控制器进行ajax调用，并将客户端数据保存在会话对象中。

我已提及JavaScript + Thymeleaf - select onchange，Thymeleaf select option和jquery: Call function by name on select change，但没有得到预期的结果。

我真诚地感谢任何帮助。

Answer 1

带有Thymeleaf选择选项和jquery的onChange方法

$("table #libelleArticle").change(function() { 
  // Add action of select option
  $("#prix").val("2000 euro");		
});

 <td th:field="*{listArticles}">
   <select class="custom-select" id="libelleArticle" name="libelleArticle" >
      <option value=""> Selectionner un article </option>
      <option th:each="article : ${listArticles}" id="selectArt" th:value="${article.libelleArticle}" th:text="${article.libelleArticle}" />
   </select>
</td>
 
<td> 
  <input type="text" class="form-control" id="prix" name="prix" /> 
</td>

Answer 2

在设置事件之前，应等到文档加载完毕。将JS调用包含在文档就绪函数中并尝试

<script type="text/javascript">
 $(function () {
     $('#clientId').on("change", function() {
            console.log($('#clientId option:selected').val());
            // your ajax call
     });
});

</script>

Answer 3

尝试th:onchange事件，而不是onchange事件。像

th:onchange="'setCltVal(this)'";

onChange方法不适用于Thymeleaf选择选项

3 个答案: