如何在 Vue.js 中监听多选下拉框的变更事件-js教程-PHP中文网

如何在 Vue.js 中监听多选下拉框的变更事件

本文介绍在 Vue 2 中为基于 Select2 封装的多选元素正确绑定 @change 事件并获取选中值的方法，重点解决原生 DOM 事件失效、v-model 同步异常等常见问题。

本文介绍在 vue 2 中为基于 select2 封装的多选 `

在 Vue.js（尤其是 Vue 2）中，直接对被第三方插件（如 Select2）封装的 <select></select> 元素使用原生 addEventListener('change') 往往无效——因为 Select2 会隐藏原生 <select></select> 并渲染自定义 DOM，其内部触发的变更不会冒泡到原生元素上。正确做法是结合 Vue 的响应式数据流与 Select2 的 API 回调机制，实现可靠监听。

✅ 推荐方案：Vue 响应式 + Select2 `change` 事件桥接

首先，确保 <select></select> 元素具备 Vue 可控性：添加 v-model 绑定，并为每个 <option></option> 显式设置 :value（推荐使用 id 而非 name，便于后端处理）：

<select id="invitees_list1" class="form-select" multiple name="multi" v-model="selectedInviteeIds">
  @foreach ($seatedTable->invitees as $invitee)
    <option :value="{{ $invitee['id'] }}">
      {{ $invitee['name'] }}
    </option>
  @endforeach
</select>

⚠️ 注意：v-model 在多选 <select></select> 中必须绑定到数组（如 selectedInviteeIds: []），否则将导致双向绑定失败。

接着，在 Vue 实例中定义处理方法及 Select2 初始化逻辑（关键！需在 mounted 中监听 Select2 的 change 事件，而非依赖 @change）：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

const app = new Vue({
  el: '#filtersContainer',
  data: {
    invitees: [],
    selectedInviteeIds: [], // ✅ 必须初始化为空数组
    // ...其余 data 字段保持不变
  },
  methods: {
    handleMultiSelectChange() {
      console.log('Vue v-model 已更新:', this.selectedInviteeIds);
      // 此处可发起请求、校验、触发子组件事件等
      this.$emit('multiSelectChanged', this.selectedInviteeIds);
    },
    // 辅助方法：同步 Select2 选中状态到 Vue 数据（可选，用于初始化回填）
    syncSelect2ToVue() {
      const $select = $('#invitees_list1');
      const selectedValues = $select.val() || [];
      this.selectedInviteeIds = Array.isArray(selectedValues) 
        ? selectedValues.map(v => String(v)) 
        : [String(selectedValues)];
    }
  },
  mounted() {
    // 初始化其他 Select2 组件...
    $('#name_filter').select2();
    $('#side_filter').select2();
    // ...其他初始化

    // ✅ 关键：为 invitees_list1 单独配置 Select2 并监听其 change 事件
    $('#invitees_list1').select2().on('change', (e) => {
      // 手动同步选中值到 Vue 响应式数据（兼容 Select2 异步操作）
      this.selectedInviteeIds = e.val || [];
      // 触发 Vue 方法（可复用已有逻辑）
      this.handleMultiSelectChange();
    });

    // 若需初始值回填（如服务端已预选），调用 syncSelect2ToVue()
    // this.syncSelect2ToVue();
  }
});

? 补充说明与最佳实践

为什么 @change 单独不生效？
Vue 的 @change 监听的是原生 <select></select> 的 DOM 事件，而 Select2 替换了交互层，其变更由 jQuery 事件系统派发，因此必须通过 .on('change') 显式订阅。
v-model 与 Select2 共存是否冲突？
不冲突，但需注意：v-model 控制的是 Vue 内部状态，Select2 控制的是 UI 展示；二者需通过事件桥接保持一致。上述代码中，Select2 的 change 回调主动更新 this.selectedInviteeIds，从而驱动视图和后续逻辑。
注意事项：
- 确保 selectedInviteeIds 始终为字符串数组（Select2 返回值类型可能为字符串或数字，建议统一转为字符串以匹配 :value 类型）；
- 避免在 created 或 mounted 中直接调用 $select.val([...]) 修改值，应通过 this.selectedInviteeIds = [...] 触发 Vue 更新，再调用 $select.trigger('change') 同步 UI；
- 如使用 Vue 3 + Composition API，推荐迁移到 vue-select 或 Element Plus 等原生支持 Vue 的组件库，避免 jQuery 插件集成复杂度。