如何用jQuery在多选下拉列表中查找选中项及解决change事件未触发问题

一、修复change事件未触发的问题 #

你的change事件没触发，大概率是代码执行时机不对——DOM还没加载完成就绑定了事件，导致找不到#ddlUsers元素。另外原代码里用ddl.text()会获取下拉列表所有选项的文本，并非选中项内容，也不符合测试需求。

修正后的代码如下：

// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
  $('#ddlUsers').change(function () {
    // 获取所有选中项的文本并拼接
    const selectedItems = $(this).find('option:selected').map(function() {
      return $(this).text();
    }).get().join(', ');
    alert(selectedItems);
  });
});

同时要确认你的下拉列表HTML正确添加了multiple属性，这是多选下拉的必要条件：

<select id="ddlUsers" multiple>
  <option value="user1">用户1</option>
  <option value="user2">用户2</option>
  <!-- 更多选项 -->
</select>

如果下拉列表是动态生成的（比如AJAX加载），需要用事件委托绑定：

$(document).ready(function() {
  $(document).on('change', '#ddlUsers', function() {
    const selectedItems = $(this).find('option:selected').map(function() {
      return $(this).text();
    }).get().join(', ');
    alert(selectedItems);
  });
});

二、判断特定选项是否选中 #

针对多选下拉，有两种常用方法判断某一选项是否被选中：

方法1：直接检查目标选项的选中状态 #

// 通过value判断（示例value为"user1"）
const isUser1Selected = $('#ddlUsers option[value="user1"]').is(':selected');
// 通过文本判断（示例文本为"用户1"）
const isUser1Selected = $('#ddlUsers option:contains("用户1")').is(':selected');

方法2：通过下拉列表的选中值数组判断 #

多选下拉的val()方法会返回所有选中项value组成的数组，直接检查数组是否包含目标值即可：

const selectedValues = $('#ddlUsers').val();
// 现代浏览器用includes判断
const isUser1Selected = selectedValues && selectedValues.includes('user1');
// 兼容老版本浏览器（如IE）用indexOf
const isUser1Selected = selectedValues && selectedValues.indexOf('user1') !== -1;

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