如何仅使用JavaScript而非jQuery获取Select2组件的选中值

Select2组件在操作时会同步更新原生<select>元素的状态，因此可以通过两种方式用原生JS获取选中值：

1. 监听原生change事件 #

直接监听原生select元素的change事件，通过元素的value属性获取选中值：

const selectProduct = document.getElementById('your-select-element-id');

selectProduct.addEventListener('change', () => {
  console.log('选中值：', selectProduct.value);
});

2. 监听Select2自定义事件获取完整数据 #

如果需要获取选中项的文本、附加数据等更多信息，可以监听Select2提供的select2:select自定义事件：

selectProduct.addEventListener('select2:select', (event) => {
  const selectedItem = event.params.data;
  console.log('选中项ID：', selectedItem.id);
  console.log('选中项文本：', selectedItem.text);
  // 若初始化Select2时传入了额外数据，也可在此获取，比如selectedItem.yourCustomField
});

注意事项 #

• 确保代码执行时，Select2已经完成对目标select元素的初始化
• 无论是通过Select2界面操作还是原生select控件操作，原生change事件都会被触发，因此第一种方法足够满足基础需求

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