Creating Cascading 3 Level Select Dropdown using Input component with JSON data

Question

I am trying to create a dropdown group dependent on each selection. So far I tried the below code. And I am able to get the data for the first dropdown but the second and third are just empty. I would really appreciate it if you could tell me what I am doing wrong.

here is my data.json :

{
  "Online": {
    "Complaint": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Delivery", "Consumer Arbitration Panel", "Product", "Website", "Other"] ,
    "Information / Request": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Delivery", "Consumer Arbitration Committee", "Product", "Website", "Other "],
    "Suggestion": ["Delivery", "After Sales Services", "Service", "Product", "Campaign", "Website", "Other"],
    "Acknowledgment": ["Delivery", "Staff", "Website", "Other"]
  },
  "Store": {
    "Complaint": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Consumer Arbitration Committee", "Product", "Other"],
    "Information / Request": ["Service", "Product", "Other", "Human Resources", "Campaign", "Payment", "After Sales Services", "Consumer Arbitration Panel"],
    "Suggestion": ["After Sales Services", "Service", "Product", "Campaign", "Other"],
    "Acknowledgments": ["Staff", "Other"]
  }
} 

here is my HTML :

<div class="form-group js-select-shopping-channel">
    <label for="shopping-channel" class="contact__form-label">{{ _('Shopping Channel') }}</label>
    {{ Select(
      name='shopping-channel',
      ruleRequired='true', 
      id="shopping-channel",
      validation_req_field=_('This field is required.'),
      class='custom-select--border-bottom p-0 rounded-0 js-shopping-channel',
      options='
        <option value="" selected="selected">Please Select</option>
        '
    )}}
  </div>

  <div class="form-group js-select-notification-type">
    <label for="notification-type" class="contact__form-label">{{ _('Topic') }}</label>
    {{ Select(
      name='notification-type',
      ruleRequired='true', 
      id="notification-type",
      validation_req_field=_('This field is required.'),
      class='custom-select--border-bottom p-0 rounded-0 js-notification-type',
      options='
        <option value="" selected="selected">Please Select</option>
        '
    )}}
  </div>

  <div class="form-group js-select-subject">
    <label for="subject" class="contact__form-label">{{ _('Subject') }}</label>
    {{ Select(
      name='subject',
      ruleRequired='true', 
      id="subject",
      validation_req_field=_('This field is required.'),
      class='custom-select--border-bottom p-0 rounded-0 js-subject') }}
  </div>

**Dropdown inputs are components that are already created in the project

here is JS code :

  renderSubjects() {
    var subjectSel = $('.js-shopping-channel select');
    var notificationSel = $('.js-notification-type select');
    var topicSel = $('.js-subject select');

    for (var x in data) {
      subjectSel.append('<option value='+x+'>'+x+'</option>');
    }
    subjectSel.onchange = function () {
      topicSel.length = 1;
      notificationSel.length = 1;
      for (var y in data[this.value]) {
        notificationSel.append('<option value='+y+'>'+y+'</option>');
      }
    };
    notificationSel.onchange = function () {
      topicSel.length = 1;
      var z = data[subjectSel.value][this.value];
      for (var i = 0; i < z.length; i++) {
        topicSel.append('<option value='+z[i]+'>'+z[i]+'</option>');
      }
    };
  }

with this code, I am only able to fill data to first select dropdown others are empty. I am not getting any console errors as well. Any idea or suggestion is more than welcome.

Answer 1

Your class name to select your select-box are not correct i.e : js-notification-type should be js-select-notification-type and same for other . Then , i have move onchange outside function and have make some changes there as well.

Demo Code :

var data = {
  "Online": {
    "Complaint": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Delivery", "Consumer Arbitration Panel", "Product", "Website", "Other"],
    "Information/Request": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Delivery", "Consumer Arbitration Committee", "Product", "Website", "Other "],
    "Suggestion": ["Delivery", "After Sales Services", "Service", "Product", "Campaign", "Website", "Other"],
    "Acknowledgment": ["Delivery", "Staff", "Website", "Other"]
  },
  "Store": {
    "Complaint": ["Service", "Campaign", "Payment", "Personnel", "After Sales Services", "Consumer Arbitration Committee", "Product", "Other"],
    "Information/Request": ["Service", "Product", "Other", "Human Resources", "Campaign", "Payment", "After Sales Services", "Consumer Arbitration Panel"],
    "Suggestion": ["After Sales Services", "Service", "Product", "Campaign", "Other"],
    "Acknowledgments": ["Staff", "Other"]
  }
}
//correct your class names here
var notificationSel = $('.js-select-notification-type select');
var topicSel = $('.js-select-subject select');
var subjectSel = $('.js-select-shopping-channel select');
renderSubjects();

function renderSubjects() {
  for (var x in data) {
    subjectSel.append('<option value=' + x + '>' + x + '</option>');
  }
}
//on chnage of subject
subjectSel.on("change", function() {
  notificationSel.find("option:not(:first)").remove() //remove all options not first
  for (var y in data[this.value]) {
    notificationSel.append('<option value=' + y + '>' + y + '</option>');
  }
  topicSel.empty()
});
notificationSel.on("change", function() {
  var z = data[subjectSel.val()][this.value];
  topicSel.empty() //empty select
  for (var i = 0; i < z.length; i++) {
    topicSel.append('<option value=' + z[i] + '>' + z[i] + '</option>');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group js-select-shopping-channel">
  <label for="shopping-channel" class="contact__form-label">{{ _('Shopping Channel') }}</label>
  <select id="shopping-channel">
    <option value="" selected="selected">Please Select</option>
  </select>
</div>

<div class="form-group js-select-notification-type">
  <label for="notification-type" class="contact__form-label">{{ _('Topic') }}</label>
  <select id="notification-type">
    <option value="" selected="selected">Please Select</option>
  </select>

</div>

<div class="form-group js-select-subject">
  <label for="subject" class="contact__form-label">{{ _('Subject') }}</label>
  <select id="subject">
  </select </div>