Dynamically select dropdown menu values based on HTML checkbox

Question

I have a form with an HTML checkbox and two dropdown/select menus. If I check the checkbox, it should dynamically select values in the dropdown menus.

Unfortunately, I am having trouble getting this to work as it seems I have to manually select the values to make them appear.

If you check the box for "Top Rated", it should dynamically select Watermelon product and Black Diamond as the product subject.

Sandbox here: https://codesandbox.io/embed/restrict-values-on-toggle-mxiq3

Any tips and advice would be greatly appreciated

PostForm.vue

<template>
  <div>
    <form>
      <input type="checkbox" v-model="form.topRated"> Top Rated
      <br>
      <br>
      <label for="product_select_input">Product:</label>
      <select v-if="form.topRated" id="product_select_input" v-model="form.product_id">
        <option value="3">Watermelon</option>
      </select>
      <select v-if="form.topRated==false" id="product_select_input" v-model="form.product_id">
        <option disabled value>Select</option>
        <option
          v-for="(product, index) in products"
          :key="index"
          :value="product.product_id"
        >{{ product.product_name }}</option>
      </select>
      <br>
      <br>
      <label for="product_subject_input">Product Subject:</label>
      <select v-if="form.topRated" id="product_subject_input" v-model="form.subject_id">
        <option value="5">Black Diamond</option>
      </select>
      <select v-if="form.topRated==false" id="product_subject_input" v-model="form.subject_id">
        <option disabled value>Select a Subject</option>
        <option
          v-for="(subject, index) in showRelatedSubj"
          :key="index"
          :value="subject"
        >{{ subject.subject_name }}</option>
      </select>
      <br>
      <br>
    </form>

    <pre>
      <div>form: {{form}}</div>
      <!-- <div>related subjects: {{showRelatedSubj}}</div> -->
    </pre>
  </div>
</template>

<script>
export default {
  name: "PostForm",
  data() {
    return {
      products: [
        {
          product_id: 1,
          product_name: "Apple"
        },
        {
          product_id: 2,
          product_name: "Banana"
        },
        {
          product_id: 3,
          product_name: "Watermelon"
        },
        {
          product_id: 4,
          product_name: "Potato"
        }
      ],
      subjects: [
        {
          subject_id: 1,
          product_id: 1,
          subject_name: "Granny Smith"
        },
        {
          subject_id: 2,
          product_id: 1,
          subject_name: "McIntosh"
        },
        {
          subject_id: 3,
          product_id: 2,
          subject_name: "Cavendish"
        },
        {
          subject_id: 4,
          product_id: 3,
          subject_name: "Jubilee"
        },
        {
          subject_id: 5,
          product_id: 3,
          subject_name: "Black Diamond"
        },
        {
          subject_id: 6,
          product_id: 4,
          subject_name: "Russet"
        },
        {
          subject_id: 7,
          product_id: 4,
          subject_name: "Yukon Gold"
        }
      ],
      form: {
        topRated: false,
        product_id: "",
        subject_id: ""
      }
    };
  },
  computed: {
    showRelatedSubj() {
      return this.subjects.filter(
        subject => this.form.product_id === subject.product_id
      );
    }
  }
};
</script>

kcsujeet · Accepted Answer · 2019-07-11 06:37:56Z

1

you could add a change event listener to your input checkbox and set a method for that event.

  <input @change="select_top_rated()" type="checkbox" v-model="form.topRated"> 


select_top_rated() {
      if (this.form.topRated){
      this.form.product_id = 3
      this.form.subject_id = 5
      } else{
        this.form.product_id = null
        this.form.subject_id = null
      }
    }

for disabling the select options after checking Top Rated checkbox, try attribute binding. :disabled in this case.

<select :disabled="select_disabled" v-if="form.topRated" id="product_select_input" v-model="form.product_id">
        <option value="3">Watermelon</option>
      </select>

define select_disabled in your data, set it to false initially. and add this to your select_top_rated() method.

this.select_disabled = true

edited Jul 11, 2019 at 6:37

answered Jul 11, 2019 at 5:39

kcsujeet

5512 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redshift Over a year ago

That was helpful, thanks! Quick question, do you know how I could disable the selects so user can't choose another product and subject value?

Collectives™ on Stack Overflow

Dynamically select dropdown menu values based on HTML checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related