Utilizing Vue.js to dynamically populate one multiple select based on another multiple select's

Question

Utilizing Vue.js to dynamically populate one multiple select based on another multiple select's

Can I create two multiple select fields where the options in the second select menu are based on what is chosen in the first select?

Clarification:

Each category has various associated descriptions.

The initial select menu, named "categories", contains static options that do not change. The second select menu is known as "descriptions".

I can choose multiple categories. If I select a category from the first menu, the second menu will display all descriptions linked to that category as options. Whenever I choose another category, the related descriptions will be appended to the second menu, and vice versa when deselecting categories. I want it to update dynamically.

I have come across these resources:

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

However, I am still searching for a solution that accommodates two multiple selects together. Any suggestions?

P.S. The number of categories and descriptions is minimal, so loading them all into the view for Vue manipulation is feasible without requiring an ajax call.

javascript vue.js

Answer 1

Answer №1

One way to achieve dynamic population of the second select is by updating its data source based on events triggered by changes in the first select.

Here's a simple outline to illustrate this concept:

<template>
  <div class="root">
    <!-- initial select with hardcoded options -->
    <select v-on:change="populate($event)" multiple="multiple">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    <select>
      <!-- reactive variable for options -->
      <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 = []
      
      Array.from(event.target.selectedOptions).forEach(item => {
        options.push({
          value: item.value,
          text: `You have selected ${item.text}`
        })
      })

      this.options = options
    }
  }
}
</script>

Update:

Check out the jsfiddle example here -> https://jsfiddle.net/bpgp11da/

Answer 2

One way to achieve dynamic population of the second select is by updating its data source based on events triggered by changes in the first select.

Here's a simple outline to illustrate this concept:

<template>
  <div class="root">
    <!-- initial select with hardcoded options -->
    <select v-on:change="populate($event)" multiple="multiple">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    <select>
      <!-- reactive variable for options -->
      <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 = []
      
      Array.from(event.target.selectedOptions).forEach(item => {
        options.push({
          value: item.value,
          text: `You have selected ${item.text}`
        })
      })

      this.options = options
    }
  }
}
</script>

Update:

Check out the jsfiddle example here -> https://jsfiddle.net/bpgp11da/

Utilizing Vue.js to dynamically populate one multiple select based on another multiple select's

Answer №1

Similar questions

A guide on showcasing Firebase array elements in Vue.js

Using AngularJS to access form field ids that are generated dynamically

Chrome and FireFox Encounter Ajax Functionality Issues

angular: handling duplicates in ng-repeat

Configuring webpack: Eliminate hash in the file names of entry/bundle *.js files

Prevent jQuery scrollTop from updating the browser history

Include the data-title attribute within the <td> elements of my datatables

Creating a vendor bundle in create-react-appReady to optimize your create-react

Mirror the input text to another input within a for loop

Continuously encountering the "Uncaught Error: Bootstrap dropdown requires Popper.js" message despite having already added popper.js to the code

Tips for extracting a value from a currently active list item's anchor tag with JQuery on Mapbox API?

Tips for eliminating additional white space within a bootstrap row

A comparison of Vue's import paths: exploring the variations

Combining arrays of objects in JavaScript

What is the most effective method to patiently anticipate a specific duration for a function's output?

Troubleshooting JavaScript Functions Failure Following AJAX XML Request

What is the best way to prevent an HTML form from being submitted when a user is not logged in, but still allow submission when the user is signed

arrange data based on table heading using vue.js

A Step-by-Step Guide to Retrieving the Route of a Controller Function in Express

What is the best way to adjust the size of a Div slideshow using