Hide specific options in second and third select menus based on previous selections in VueJS

user_13928344 0
Viewed 133

I would like to show/hide certain options in select menu 2 depending on what is chosen in select 1 and also show/hide certain options in select menu 3 depending on what is chosen in select menu 2.

For example, if the user selects 'Subject01' in the first menu I would like to hide 'Subject04' and 'Subject08' in menu 2. If the user selects 'Subject016' in select 2, I would like to hide 'Subject11' in menu 3. I have several scenarios based on the subject selections. So these are just examples.

I can add a class to the but I don't know how to add to the individual tags.

Any help appreciated.

The code:

<template>
  <select v-model="one" id="selectone">
    <option v-for="subject in subjects" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in subjects.filter((item) =>
        item.split(' ')[0].indexOf(this.one.split(' ')[0])
      )"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in subjects.filter(
        (item) =>
          item.split(' ')[0].indexOf(this.one.split(' ')[0]) &&
          item.split(' ')[0].indexOf(this.two.split(' ')[0])
      )"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>

  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</template>
<script>
export default {
  data() {
    return {
      subjects: [
        "Subject01",
        "Subject02",
        "Subject03",
        "Subject04",
        "Subject05",
        "Subject06",
        "Subject07",
        "Subject08",
        "Subject09",
        "Subject10",
        "Subject11",
        "Subject12",
        "Subject13",
        "Subject14",
        "Subject15",
        "Subject16",
      ],
      one: "",
      two: "",
      three: "",
    };
  },
  methods: {},
};
</script>
<style>
li {
  list-style-type: none;
}
.hide {
  display: none;
}

.show {
  display: block;
}
</style>
vuejs2 vue.js javascript
3 Answers

You can create objects in data property with matching cases for showing items and then use computed properties:

new Vue({
  el: "#demo",
  data() {
    return {
      subjects: ["Subject01", "Subject02", "Subject03", "Subject04", "Subject05", "Subject06", "Subject07", "Subject08", "Subject09", "Subject10", "Subject11", "Subject12", "Subject13", "Subject14", "Subject15", "Subject16",],
      disOne: {"Subject01":["Subject04", "Subject08"]}, // you can set here other cases for example for some other subject dont show array of other subjects
      disTwo: {"Subject16":["Subject11"]},
      one: "",
      two: "",
      three: "",
    }
  },
  computed: {
    sub2() {
      if (this.one) {
        return this.subjects.filter(s => !this.disOne[this.one].includes(s))
      }
    },
    sub3() {
      if (this.two) {
        return this.subjects.filter(s => !this.disTwo[this.two].includes(s))
      }
    }
  },
  methods: {},
})
li {
  list-style-type: none;
}
.hide {
  display: none;
}

.show {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="one" id="selectone">
    <option v-for="subject in subjects" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in sub2"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in sub3"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</div>

user_119891890

As @wittgenstein said, you can use a computed property:

new Vue({
  el: '#app',
  data() {
    return {
      subjects: [
        "Subject01",
        "Subject02",
        "Subject03",
        "Subject04",
        "Subject05",
        "Subject06",
        "Subject07",
        "Subject08",
        "Subject09",
        "Subject10",
        "Subject11",
        "Subject12",
        "Subject13",
        "Subject14",
        "Subject15",
        "Subject16",
      ],
      one: "",
      two: "",
      three: "",
    };
  },
  computed: {
    select1() {
      return this.subjects
    },
    select2() {
      if (this.one === 'Subject01') {
          return this.subjects.filter(subject => !['Subject04', 'Subject08'].includes(subject))
      }
      return this.subjects
    },
    select3() {
      if (this.two === 'Subject16') {
          return this.subjects.filter(subject => subject !== 'Subject04')
      }
      return this.subjects
    },
  },
  methods: {},
});
li {
  list-style-type: none;
}
.hide {
  display: none;
}

.show {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="one" id="selectone">
    <option v-for="subject in select1" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in select2"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in select3"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>

  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</div>

user_74511090

Have separate computer properties as source for 2nd and 3rd select options and render them in loops.

When first select option value changes, these computer properties will automatically update.

Make sure you use :key else order of rendering options may be inconsistent.

user_96161680
Related