同步绑定到同一集合和同一选定项的两个组合框

// 假设我们使用的是Vue.js框架
<template>
  <div>
    <select v-model="selectedOption" @change="syncOptions">
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
    <select v-model="selectedOption">
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' }
      ]
    };
  },
  methods: {
    syncOptions() {
      // 确保两个组合框的选中项一致
      this.$refs.secondSelect.value = this.selectedOption;
    }
  }
};
</script>