javascript - 使用带有 JSON 数据的输入组件创建级联 3 级选择下拉列表

Question

我正在尝试根据每个选择创建一个下拉组。到目前为止，我尝试了以下代码。我能够获取第一个下拉列表的数据，但第二个和第三个下拉列表是空的。如果您能告诉我我做错了什么，我将不胜感激。

这是我的 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"]
  }
} 

这是我的 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>

**下拉输入是项目中已经创建的组件

这是 JS 代码:

  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>');
      }
    };
  }

使用此代码，我只能将数据填充到第一个选择下拉列表中，其他都是空的。我也没有收到任何控制台错误。我们非常欢迎任何想法或建议。

Answer 1

用于选择选择框的类名不正确，即:js-notification-type 应为 js-select-notification-type 并且其他相同。然后，我将 onchange 移到函数外部，并在那里进行了一些更改。

演示代码:

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>