CODEWITHSUNDEEP
javascriptvue.jsselectreset
savannah wang
savannah wang

Reputation: 1

How can I reset child select box once change the parent one? [Vue]

I have three combo selection boxes, the first one is the parent and the others are children.

There are two options(A, B) in the first box(combo-a), and each of them has its own corresponding options in combo-b and combo-c.

The problem is when I choose A, then change to B, and change to A again, the previously selected options in combo-b, as well as combo-c, are there.

How can I reset combo-b and combo-c once I change combo-a.

Plus: flushCallbacks always works at the end.

$(next_combo).val("") ; //no effects
    $(next_combo).empty();//error
    $(next_combo).hide();//disappear
  $(next_combo).find(':selected').data('value').val('');//error
  $(next_combo).prop('selectedIndex', 0)//not work
  $(next_combo).val("_");//not work
  $(next_combo).attr('value','');not work
  $(next_combo).val( $(next_combo).prop('defaultSelected') );works but has callback!

Upvotes: 0

Views: 84

Answers (1)

Rohìt Jíndal
Rohìt Jíndal

Reputation: 27202

As you are using Vue, You can achieve that without using JQuery. It's not a good practice to use jQuery for DOM manipulations we are already working with JavaScript framework/libraries.

I just created a working demo :

Vue.component('combo_b', {
  props: ['data'],
  template: `<select>
    <option v-for="(item, index) in data" :key="index" :value="item">{{ item }}</option>
  </select>`
});

var app = new Vue({
  el: '#app',
  data: {
        combo_a: 'A',
      comboBData: ['C', 'D']
  },
  methods: {
    getOtherComboData: function() {
      this.comboBData = (this.combo_a === 'A') ? ['C', 'D'] : ['E', 'F']
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label> Parent :
  <select v-model="combo_a" @change="getOtherComboData">
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
  </label><br><br>
  <label> Child :
  <combo_b :data="comboBData"/>
  </label>
</div>

Upvotes: 1

Related Questions