Question

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

说明：

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

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

我可以根据需要选择多个类别。如果我选择一个类别，则第二个选择菜单将包含与该类别相关的所有描述作为选项。当我在类别选择字段中选择另一个类别时，与该类别相关的描述将添加到第二个选择菜单，依此类推。同样取消选择。我希望它能被反应。

我找到了这些：

https://github.com/sagalbot/vue-select https://github.com/monterail/vue-multiselect

但是我还没有找到一个解决方案来做到这两个多选。有什么指针吗？

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

Answer 1

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

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

<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>

后来编辑

jsfiddle here - ＆gt; https://jsfiddle.net/bpgp11da/

Vue.js多选以填充另一个多选

1 个答案: