如何监听select选中option事件 触发函数为对应ID元素添加类

你的代码存在3个直接导致运行失败的问题：

• 事件绑定逻辑错误：下拉框<option>元素的click事件在大部分浏览器下兼容性极差，无法稳定触发，正确做法是监听父级<select>的change事件，再判断当前选中值
• jQuery调用语法错误：你拼接的"#" + element只是普通字符串，没有传入jQuery构造函数包装成jQuery对象，直接调用addClass会直接抛出JS错误
• 冗余逻辑：你的array01里存在重复id（如05-05出现2次），不去重会重复操作同一个DOM元素，浪费性能

JavaScript部分 #

const array01 = [
  {id:"07-01"}, {id:"05-01"}, {id:"05-03"}, {id:"05-05"}, {id:"05-07"},
  {id:"05-09"}, {id:"05-11"}, {id:"05-13"}, {id:"05-05"}, {id:"06-05"},
  {id:"07-08"}, {id:"07-11"}, {id:"06-13"}
]
// 提取所有目标id并去重
const targetIds = [...new Set(array01.map(item => item.id))]

// 监听下拉框选择变化
$('#selector').on('change', function() {
  // 切换选项时先移除旧的特殊类，避免样式残留，不需要可以删掉这行
  $('.mySpecialClass').removeClass('mySpecialClass')
  
  // 选中item1时批量加类
  if ($(this).val() === 'item1') {
    targetIds.forEach(id => {
      // 必须将选择器字符串包装为jQuery对象才能调用jQuery方法
      $(`#${id}`).addClass('mySpecialClass')
    })
  }
})

HTML部分（仅做规范优化，原有结构基本可用） #

<select id="selector" class="selector">
  <option value="" selected>Preset</option>
  <option value="item1" class="item1" id="item1">item1</option>
  <option value="item2" class="item2" id="item2">item2</option>
  <option value="item3" class="item3" id="item3">item3</option>
</select>

• 如果你的元素id包含.、:、/这类jQuery选择器会识别为特殊语法的字符，把选择器部分替换为$(document.getElementById(id))即可避免解析错误，兼容性更好
• 如果不需要切换选项时清除mySpecialClass样式，直接删除代码中对应removeClass的行即可

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