如何在jQuery中改变下拉框值时触发点击事件？

问题描述 #

我一直在寻找一种既能改变下拉框选中项的值，又能触发点击函数的方法。目前已成功实现下拉框选中值的修改，下拉框代码如下：

<select id="testdropdown" class="filter-group" data-filter-group="filtergroupone">
      <option class="buttontest is-checked" value="">Any Value</option>
      <option class="buttontest" value=".test1">Test 1</option>
      <option class="buttontest" value=".test2">Test 2</option>
      <option class="buttontest" value=".test3">Test 3</option>
</select>

我用以下jQuery代码修改值：

jQuery('#testdropdown').val('.test1');

但问题是，我为下拉框绑定了一个jQuery点击函数，修改值为Test 1时该函数并未触发。我尝试过以下方法，但都无效，只能显示选中值：

jQuery('#testdropdown').selectmenu('refresh', true);
jQuery(('#testdropdown').click());

需要一种在值改变时触发点击函数的方法，让绑定的jQuery点击函数执行，请问有可行的解决办法吗？

解决方法 #

通过JavaScript手动修改下拉框的val()不会自动触发用户交互类事件（比如click或change），必须手动触发对应的事件才能让绑定的回调执行。

1. 触发下拉框的click事件（绑定在<select>上时） #

如果你的点击函数是绑定在<select>元素本身的，修改值后直接用trigger()方法触发事件即可：

// 先修改选中值
jQuery('#testdropdown').val('.test1');
// 手动触发click事件
jQuery('#testdropdown').trigger('click');

2. 触发选项的click事件（绑定在<option>上时） #

如果你的点击事件是绑定在<option>元素上的，需要找到对应选项后触发它的click事件：

// 修改下拉框选中值
jQuery('#testdropdown').val('.test1');
// 找到对应option并触发click
jQuery('#testdropdown option[value=".test1"]').trigger('click');

3. 更推荐的方案：改用change事件 #

下拉框的选中值变化，原生更适合用change事件而非click事件，如果你可以调整事件绑定，建议改成：

// 绑定change事件
jQuery('#testdropdown').on('change', function() {
  // 你的业务逻辑代码
});

// 修改值后触发change事件
jQuery('#testdropdown').val('.test1').trigger('change');

关于你尝试方法的问题说明 #

• selectmenu('refresh', true)是jQuery UI的组件方法，只有引入jQuery UI并初始化selectmenu组件时才有效，它的作用是刷新组件UI，并非触发事件。
• jQuery(('#testdropdown').click());写法错误，('#testdropdown').click()不符合jQuery语法，正确的事件触发方式是使用trigger()方法。

内容的提问来源于stack exchange，提问作者PHnSe