Load data to SelectBox based on the onchange event of another selectBox

1

Hi Guys,

i have two selectboxes and i want to load data to the second selectbox based on the selection i made on the first selectbox. as i am new to ember i find it difficult to accomplish this. Can you guys plzz help?

Thanks in advance

2

Lets assume this is all done in a component called dynamic-dropdowns. The code can also be applied to a controller & template.

ember-cli ember install ember-power-select

components/dynamic-dropdowns/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  dataset1: ["one", "two", "three", "four"],
  dataset2: [],

  actions: {
    // this is the action that gets called when the 1st dropdown is selected
    selectDataset(item) {
        const _this = this;
        // get the new dataset for the 2nd dropdown
        Ember.$.getJSON("/newdata/" + item).then(data => {
          _this.set('dataset2', data);
        });
    },

    // this is the action that gets called when the 2nd dropdown is selected
    selectNewdataset(item) {
      // do something
    }
  }
}

components/dynamic-dropdowns/template.hbs

<b>Data Set 1</b>
{{#power-select options=dataset1 onchange=(action "selectDataset") as |datum|}}
  {{datum}}
{{/power-select}}
<br/><br/>

<b>Data Set 2</b>
{{#power-select options=dataset2 onchange=(action "selectNewdataset") as |datum|}}
  {{datum}}
{{/power-select}}