javascript - 连续下拉过滤缺少默认选择值

Question

注意:代码片段已更正并有效。

在 MySQL 表中，我有以下列(和相应的值):

• 类别(水果、蔬菜)
• 类型(苹果、橙子、南瓜、土 bean )
• 亚型(Red Delicious、Granny Smith、Fuji、Valencia、Navel、Kent、Butternut、Desiree、Carlingford)

下面是下拉菜单的代码和 JavaScript 函数，它们根据上一个下拉菜单中的值选择更改下一个下拉菜单的选项:

var typeOptions = {};
typeOptions['Fruit'] = [
  'Apple',
  'Orange'
];
typeOptions['Vegetable'] = [
  'Potato',
  'Pumpkin'
];
typeOptions['Select a category'] = [];

function changeCategory() {
  var categoryChoice = document.getElementById('category');
  var typeChoice = document.getElementById('type');
  var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value;
  while (typeChoice.options.length) {
    typeChoice.remove(0);
  }
  var typesAvailable = typeOptions[selectedCategoryChoice];
  if (typesAvailable) {
    selectType = document.createElement('option');
    selectType.text = 'Select a type';
    typeChoice.add(selectType);
    var i;
    for (i = 0; i < typesAvailable.length; i++) {
      var type = new Option(typesAvailable[i], typesAvailable[i]);
      typeChoice.options.add(type);
    }
  }
  var subtypeChoice = document.getElementById('subtype');
  if (selectedCategoryChoice == 'Select a category') {
    while (subtypeChoice.options.length) {
      subtypeChoice.remove(0);
    }
    selectSubtype = document.createElement('option');
    selectSubtype.text = 'Select a subtype';
    subtypeChoice.add(selectSubtype);
  }
};

var subtypeOptions = {};
subtypeOptions['Apple'] = [
  'Fuji',
  'Granny Smith',
  'Red Delicious'
];
subtypeOptions['Orange'] = [
  'Navel',
  'Valencia'
];
subtypeOptions['Potato'] = [
  'Carlingford',
  'Desiree'
];
subtypeOptions['Pumpkin'] = [
  'Butternut',
  'Kent'
];

function changeType() {
  var typeChoice = document.getElementById('type');
  var subtypeChoice = document.getElementById('subtype');
  var selectedTypeChoice = typeChoice.options[typeChoice.selectedIndex].value;
  while (subtypeChoice.options.length) {
    subtypeChoice.remove(0);
  }
  if (selectedTypeChoice == 'Select a type') {
    while (subtypeChoice.options.length) {
      subtypeChoice.remove(0);
    }
    selectSubtype = document.createElement('option');
    selectSubtype.text = 'Select a subtype';
    subtypeChoice.add(selectSubtype);
  }
  var subtypesAvailable = subtypeOptions[selectedTypeChoice];
  if (subtypesAvailable) {
    selectSubtype = document.createElement('option');
    selectSubtype.text = 'Select a subtype';
    subtypeChoice.add(selectSubtype);
    var i;
    for (i = 0; i < subtypesAvailable.length; i++) {
      var subtype = new Option(subtypesAvailable[i], subtypesAvailable[i]);
      subtypeChoice.options.add(subtype);
    }
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
  <label for="category" id="categoryLabel" style="text-align: left">Category</label>
  <select name="category" id="category" onchange="changeCategory()" class="form-control">
    <option value="Select a category" selected>Select a category</option>
    <option value="Fruit">Fruit</option>
    <option value="Vegetable">Vegetable</option>
  </select>
</div>
<div class="col-sm-12">
  <label for="type" id="typeLabel" style="text-align: left">Type</label>
  <select name="type" id="type" onchange="changeType()" class="form-control">
    <option value="Select a type" selected>Select a type</option>
  </select>
</div>
<div class="col-sm-12">
  <label for="subtype" id="subtypeLabel" style="text-align: left">Subtype</label>
  <select name="subtype" id="subtype" class="form-control">
    <option value="Select a subtype" selected>Select a subtype</option>
  </select>
</div>

我遇到的问题是，一旦我选择了第一个下拉菜单的值，第二个下拉菜单的“选择类型”部分和第三个下拉菜单的“选择子类型”部分就会立即消失。例如，当我在第一个下拉菜单中选择水果时，第二个下拉菜单默认为 Apple，但第三个下拉菜单不显示 Apple 子类型，我必须切换到 Orange，然后再切换回 Apple 才能显示。

此外，如果我将第一个下拉菜单重置为“选择类别”，第二个下拉菜单将重置为空白并且不显示“选择类型”，而第三个下拉菜单根本不会重置。

更新:

如果我删除以下代码:

while (typeChoice.options.length) {
  typeChoice.remove(0);
}

我可以保留默认的“选择一个 x”值，但这意味着累积过滤不再正常工作(例如，在选择 Apple 后选择 Orange 只会将 Orange 子类型添加到子类型下拉列表中，而不会删除 Apple 子类型)。

更新 2:

我试图根据 this jsFiddle 添加“重置”按钮能够重置所有下拉菜单，但它只会重置第一个。

<a href="#" onclick="$('select').each(function() { this.selectedIndex = 0 });">Reset</a>

更新 3:

开始工作了。首先，在第一个下拉菜单的基础上增加了第二个下拉菜单的选项:

typeOptions['Select a category'] = []; 

在添加第二个下拉列表的新选项的 FOR 循环之前，但在删除第二个下拉列表的所有旧选项的 WHILE 循环之后，结合此:

selectType = document.createElement('option');
selectType.text = 'Select a type';
typeChoice.add(selectType);

这可确保在第一个下拉列表中选择一个值时，“选择类型”的默认值会保留，但在第二个下拉列表中会保留，并保留在下拉列表的顶部，并且在添加其他选项之前仍处于选中状态。将第一个下拉菜单重置为“选择类别”时，第二个下拉菜单将丢失其剩余选项，然后重新添加默认值。

然后添加:

if (selectedCategoryChoice == 'Select a category') {
  while (subtypeChoice.options.length) {
    subtypeChoice.remove(0);
  }
  selectSubtype = document.createElement('option');
  selectSubtype.text = 'Select a subtype';
  subtypeChoice.add(selectSubtype);
}

此代码检查所选类别选项，如果它是用户选择的默认值，则重置子类型。

当第二个下拉菜单发生变化时，这同样适用于第三个下拉菜单。

Answer 1

开始工作了。首先，在第一个下拉菜单的基础上增加了第二个下拉菜单的选项:

typeOptions['Select a category'] = []; 

在添加第二个下拉列表的新选项的 FOR 循环之前，但在删除第二个下拉列表的所有旧选项的 WHILE 循环之后，结合此:

selectType = document.createElement('option');
selectType.text = 'Select a type';
typeChoice.add(selectType);

这可确保在第一个下拉列表中选择一个值时，“选择类型”的默认值会保留，但在第二个下拉列表中会保留，并保留在下拉列表的顶部，并且在添加其他选项之前仍处于选中状态。将第一个下拉菜单重置为“选择类别”时，第二个下拉菜单将丢失其剩余选项，然后重新添加默认值。

然后添加:

if (selectedCategoryChoice == 'Select a category') {
  while (subtypeChoice.options.length) {
    subtypeChoice.remove(0);
  }
  selectSubtype = document.createElement('option');
  selectSubtype.text = 'Select a subtype';
  subtypeChoice.add(selectSubtype);
}

此代码检查所选类别选项，如果它是用户选择的默认值，则重置子类型。

当第二个下拉菜单发生变化时，这同样适用于第三个下拉菜单。