如何通过jQuery或原生JS为select添加onchange属性触发指定函数

实现逻辑分为原生JS和jQuery两种写法，均可以完全匹配预期的DOM渲染效果，最终select标签上会带有onchange="namefunction(this)"属性。

原生JS实现 #

• 核心逻辑：通过元素ID选中目标select节点，使用setAttribute方法直接为元素绑定内联onchange属性
• 必须确保代码在DOM加载完成后执行，避免元素未渲染就选中导致报错
• 代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.getElementById('test-dropdown');
  dropdown.setAttribute('onchange', 'namefunction(this)');
});

jQuery实现 #

• 核心逻辑：通过jQuery选择器选中目标元素，调用attr方法设置内联属性
• 需提前引入jQuery依赖，代码会自动等待DOM加载完成后执行
• 代码示例：

$(function() {
  $('#test-dropdown').attr('onchange', 'namefunction(this)');
});

注意事项：如果目标select是动态渲染（比如异步请求、模板插入生成）的元素，必须在元素成功插入DOM之后再执行上述赋值代码，否则会出现找不到目标元素的报错。

• 补充说明：如果不需要严格让select标签上展示内联onchange属性，仅需实现选项变更触发逻辑，可使用事件绑定写法，但这种方式不会在标签上生成对应属性，不符合预期DOM效果：

// 原生事件绑定写法，无内联属性生成
document.getElementById('test-dropdown').addEventListener('change', function() {
  namefunction(this);
});

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