如何强制触发<select>元素的选项变更事件？含默认选项触发需求

嘿，这个问题我之前也碰到过！原生的change事件确实只会在选中项真正发生变化的时候才触发，所以默认选中的第一个选项如果没被切换过，直接点它是不会触发弹窗的。给你两种解决方案，看你需求来选：

方案一：仅页面加载+切换回默认选项时触发（简洁版） #

如果你的需求只是页面加载时默认选项弹出提示，并且用户切换到其他选项后再切回第一个时触发，用这个简洁的方法就够了：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<script>
$(document).ready(function() {
  // 绑定change事件
  $('select').change(function(){
    alert('changed');
  }).trigger('change'); // 页面加载完成后手动触发一次change事件
});
</script>
</body>
</html>

原理：页面加载完成后，通过.trigger('change')手动触发一次select的change事件，这样默认选项就会立刻弹出提示；而当用户从其他选项切回第一个时，因为选中状态发生了变化，原生change事件会正常触发。

方案二：包含重复点击默认选项也触发的场景（完整版） #

如果你需要用户即使在默认选项已经选中的情况下，再次点击选择它也能触发弹窗，那得结合click事件来处理：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<script>
$(document).ready(function() {
  // 记录当前选中的选项值
  let currentSelectedValue = $('#mySelect').val();
  
  // 定义统一的事件处理函数
  function handleSelectChange() {
    alert('changed');
    // 更新当前选中值
    currentSelectedValue = $(this).val();
  }
  
  // 绑定change事件
  $('#mySelect').change(handleSelectChange);
  
  // 页面加载时触发一次，处理默认选项
  handleSelectChange.call($('#mySelect')[0]);
  
  // 绑定click事件，处理重复选择同一选项的情况
  $('#mySelect').click(function() {
    const $selectElement = $(this);
    // 延迟100ms，等待浏览器更新选中状态
    setTimeout(() => {
      const newSelectedValue = $selectElement.val();
      // 如果选中的还是之前的值，说明重复选择了同一选项，手动触发处理函数
      if (newSelectedValue === currentSelectedValue) {
        handleSelectChange.call($selectElement[0]);
      }
    }, 100);
  });
});
</script>
</body>
</html>

原理：

1. 先记录初始选中的默认值，定义统一的处理函数，避免代码重复；
2. 页面加载时手动调用处理函数，确保默认选项触发提示；
3. 监听select的click事件，延迟一小段时间后检查选中值是否和之前一致——如果一致，说明用户重复选择了当前已经选中的选项，这时候手动触发处理函数，实现弹窗效果。

内容的提问来源于stack exchange，提问作者Gustavo Henrique Lima