连续下拉过滤缺少默认选择值答案

【问题标题】：Consecutive dropdown filtering missing default select value连续下拉过滤缺少默认选择值
【发布时间】：2017-12-13 03:14:24
【问题描述】：

注意：代码 sn-p 已更正并可以正常工作。

在 MySQL 表中，我有以下列（和相应的值）：

类别（水果、蔬菜）
类型（苹果、橙子、南瓜、土豆）
亚型（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);
}

我可以保留默认的“Select ax”值，但这意味着累积过滤不再正常工作（例如，在选择 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);
}

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

当第二个下拉菜单更改时，这同样适用于第三个下拉菜单。

【问题讨论】：

标签： javascript jquery html mysql drop-down-menu

【解决方案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);
}

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

当第二个下拉菜单更改时，这同样适用于第三个下拉菜单。

【讨论】：