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

【问题标题】：onChange method not working with Thymeleaf select optiononChange 方法不适用于 Thymeleaf 选择选项
【发布时间】：2018-03-30 19:50:26
【问题描述】：

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

side-bar.html 中有一个 select 选项 元素，其中填充了客户端 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.htmlfile 中。

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

Now I am trying to make an ajax call when any of the select options are selected to save them in the session object.为此，我在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>

选择选择选项时从未调用此脚本。

我也试过这个：

<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，但没有得到预期的结果。

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

【问题讨论】：

你能console.log($('#clientId')) 确保元素被正确拾取吗？
@Bricky 在控制台上没有给出任何输出。
你是把它放在改变时执行的函数之前还是里面？如果你把它放在之前并且它没有输出 anything 那么你的 javascript 文件没有被执行，或者之前遇到了错误。如果你把它放在里面，然后把它移到上面一行试试。
@Bricky 我把它放在函数之前。编辑我的代码以显示相同。
尝试将您的 eventListener 更改为 $(document).on("change", "#clientId", function() { 还可以在 console.log 中添加其他内容作为健全性检查，例如 console.log($('#clientId'), 'hello world');

标签： jquery html ajax thymeleaf

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

应该等到文档加载完毕后再设置事件。将 JS 调用封装在文档就绪函数中并尝试

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

</script>

【讨论】：