Question

注意：代码段已更正且有效。

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

类别（水果，蔬菜）
类型（苹果，橘子，南瓜，马铃薯）
亚型（Red Delicious，Granny Smith，Fuji，Valencia，Navel，Kent，Butternut，Desiree，Carlingford）

以下是下拉列表和JavaScript函数的代码，这些函数根据上一个下拉列表中的值选择更改下一个下拉列表的选项：

＆＃13;

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

＆＃13;

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

＆＃13;

我遇到的问题是，只要我选择第一个下拉列表的值，＆＃34;选择一个类型＆＃34;第二个下拉列表的一部分和＆＃34;选择一个子类型＆＃34;第三次下拉的部分立即消失。当我在第一个下拉列表中选择水果时，第二个下拉列表默认为Apple，但第三个下拉列表不显示Apple子类型，我必须切换到Orange，然后返回Apple以显示此信息。

此外，如果我将第一个下拉菜单重置为＆＃34;选择一个类别＆＃34;，则第二个下拉菜单重置为空白并且不显示＆＃34;选择类型＆＃34;，而第三个下拉列表执行根本没有重置。

更新：

如果我删除以下代码：

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

我可以保留默认值＆＃34;选择一个x＆＃34;值，但这意味着累积过滤不再正常工作（选择橙色，例如选择Apple后，只需将橙色子类型添加到子类型下拉列表中，而不删除Apple子类型）。

更新2：

我尝试添加＆＃34;重置＆＃34;按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);

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

然后添加：

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

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

然后添加：

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

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

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

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

1 个答案: