强制触发选择下拉菜单的 onChange

Posted 2023-05-09

【中文标题】强制触发选择下拉菜单的 onChange

【英文标题】：Force triggering onChange of select dropdown

【发布时间】：2021-11-01 05:04:41

【问题描述】：

我有一个表单，其中包含使用 GravitForms/WordPress 创建的步骤。

我创建了一个函数来将下拉值复制到输入值和从第一页复制到第二页的 div。 第一次，它工作正常，但如果从第 2 页返回到第 1 页并更改选择值，则输入值不会更新。

有什么方法可以 吗？

我的代码：

var select_dates = document.getElementById("input_4_3");
select_dates.addEventListener("change", function() 
    document.getElementById("date_left").innerhtml = select_dates.value;
    document.getElementById("input_4_33").value = select_dates.value;
    console.log(select_dates.value);
);

【参考方案1】：

您标记了 jQuery，所以这是一个 jQuery 答案

更改下拉菜单，然后点击链接

你可能会使用 AJAX 加载选择，所以试试这个委托

ctrl-左箭头返回

$(function() 
  $(document).on("change", "#input_4_3", function() 
    $("#date_left").html(this.value)
    $("#input_4_33").val(this.value)
    console.log(this.value);
  ).change();
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="input_4_3">
  <option value="">Please select</option>
  <option value="D 1">Date 1</option>
  <option value="D 2">Date 2</option>
</select>
<span id="date_left"></span>
<input type="text" id="input_4_33" />
<a href="https://placeholder.com">Go somewhere</a>

【讨论】：

同样的问题，我不知道为什么我回到第一页时不会触发。

将我的代码添加到页面末尾的脚本标签中

我就是这么做的

我试过了，但没有运气。这是一个链接（单击“Préinscription”按钮打开表单模式）：link。 ibb.co/ysp7qk2

可能需要将函数包裹在$(window).on('ajaxComplete', function()等中

【参考方案2】：

您可以使用以下方法在选择元素上触发更改事件：

$('#input_4_3').trigger('change');