onChange方法不工作与Thymeleaf选择选项

Question

我正在做一个Spring Boot Thymeleaf项目。我有side-bar.html文件，其中的片段用于其他超文本标记语言文件，以避免重写代码。

侧栏中有一个select选项元素。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>

我已经在索引中包含了这个片段。html文件。

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

现在，我尝试在选择任何一个select选项时进行ajax调用，以将它们保存在session对象中。为此，我在索引中提供了一个js脚本。html。

<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>

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

我也试过：

<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>

我想通过这段代码实现的是：当选择任何一个select选项时，将调用脚本，从而对控制器进行ajax调用，并将客户机数据保存在session对象中。

我参考了JavaScript Thymeleaf-selectonchange、Thymeleaf-select选项和jquery:Call函数，但没有得到预期的结果。

我将真诚地感谢任何帮助。

Answer 1

尝试使用th:onchange事件，而不是仅使用onchange事件。喜欢

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

Answer 2

应等待文档加载后再设置事件。将JS调用包装到document ready函数中，然后重试

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

</script>

Answer 3

带有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>