Javascript Vue.js multiple select可填充另一个multiple select

是否可以有两个多个选择字段，第二个选择选项将根据第一个选择中选择的内容填充

说明：

每个类别都有许多与之相关的描述

主选择菜单称为“类别”，选项是静态的，不会更改。 第二个选择菜单称为“说明”

我可以选择任意多个类别。如果我选择一个类别，第二个选择菜单将包含与该类别相关的所有描述作为选项。当我在类别选择字段中选择另一个类别时，与该类别相关的说明将添加到第二个选择菜单中，依此类推。取消选择也是如此。我希望它是反应性的

我发现：

但我还没有找到一个解决方案，用两个多重选择来实现这一点。有什么建议吗

---

另外，没有太多的类别和描述，因此我可以将它们全部加载到视图中，以便vue可以使用它们。我不需要ajax调用。

您需要动态填充第二个select，并根据来自第一个select的事件更新其数据源

这是一个小草图，我希望它能有所帮助

<template>
  <div class="root">
    <!-- initial select (options hardcoded) -->
    <select v-on:change="populate($event)" multiple="multiple">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    <select>
      <!-- options variable is reactive -->
      <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'Selects',
  data () {
    return {
      options: []
    }
  },
  methods: {
    populate (event) {
      const options = []
      // iterate over the selected options
      // event.target.selectedOptions is a HTMLCollection 

      Array.from(event.target.selectedOptions).forEach(item => {
        // or whatever logic you need
        options.push({
          value: item.value,
          text: `You have selected ${item.text}`
        })
      })

      // update the options attribute to trigger re-rendering
      this.options = options
    }
  }
}
</script>

一个
两个
{{option.text}
导出默认值{
名称：'选择'，
数据（）{
返回{
选项：[]
}
},
方法：{
填充（事件）{
常量选项=[]
//迭代选定的选项
//event.target.selectedOptions是一个HTMLCollection
Array.from（event.target.selectedOptions）.forEach（item=>{
//或者任何你需要的逻辑
选项。推({
值：item.value，
text:`您已选择${item.text}`
})
})
//更新“选项”属性以触发重新渲染
this.options=选项
}
}
}

后期编辑

jsfiddle here->

---

非常感谢，我将尝试一下，看看我是否能使它工作：）也许有小提琴，这样我就可以看到它的行动？我自己无法让它工作。在主消息中添加了一个。你的设置是什么？