VueJS中如何将多个多选框值合并为一个对象？

当然可行！你只需要调整一下数据绑定和选中值的收集逻辑就行——不用完全推翻原有绑定，但要注意避免单个模型被多次覆盖的问题。下面是具体实现思路和代码示例：

核心思路 #

1. 没必要强制让三个多选框绑定完全相同的模型（否则每次选择会互相覆盖），可以给每个多选框绑定独立模型，或者直接通过DOM获取所有选中项后合并。
2. 利用ChosenJS的change事件，每次选项变更时自动收集所有多选框的选中值，合并成一个统一的数组。

代码实现 #

假设你的HTML结构是三个ChosenJS多选框：

<select class="chosen-select" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select class="chosen-select" multiple>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>
<select class="chosen-select" multiple>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
</select>
<p>Selected Options: <span id="selected-result"></span></p>

对应的JavaScript逻辑：

// 初始化ChosenJS
$('.chosen-select').chosen({
  width: '200px'
});

// 定义收集所有选中值的函数
function getAllSelectedValues() {
  let selected = [];
  $('.chosen-select').each(function() {
    // 获取当前多选框的所有选中值，合并到数组中
    selected = selected.concat($(this).val() || []);
  });
  return selected;
}

// 监听每个多选框的change事件，更新结果
$('.chosen-select').on('change', function() {
  const selectedValues = getAllSelectedValues();
  $('#selected-result').text(JSON.stringify(selectedValues));
  // 这里可以把selectedValues赋值给你需要的模型对象
  // 比如：yourModel.selectedOptions = selectedValues;
});

关键说明 #

• 如果是用Vue/Angular这类MVVM框架，可以给每个多选框绑定独立数组，再通过计算属性合并成统一数组，更符合框架的响应式逻辑。
• $(this).val()对于多选框会返回选中值的数组，用concat就能轻松合并所有选中项。
• 要处理$(this).val()为null的情况（当多选框没有选中项时），所以用|| []避免报错。

这样就能实现你想要的效果：任意多选框中选择/取消选项时，都会自动合并所有选中值为一个数组，比如['2','3','6','8']。

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