使用带有 JSON 数据的输入组件创建级联 3 级 Select 下拉菜单

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 ie: 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>