连续下拉列表筛选缺少默认选择值

Question

注意：代码片段已更正并正常工作。

在 MySQL 表中，我有以下列(以及相应的值(：

• 类别(水果、蔬菜(
• 类型(苹果，橙子，南瓜，土豆(
• 亚型(红美味，史密斯奶奶，富士，瓦伦西亚，脐橙，肯特，胡桃，德西雷，卡林福德(

下面是下拉列表和 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 子类型，我必须切换到橙色，然后返回 Apple 才能显示这一点。

此外，如果我将第一个下拉列表重置回"选择类别"，则第二个下拉列表将重置为空白并且不显示"选择类型"，而第三个下拉列表根本不会重置。

更新：

如果我删除以下代码：

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

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

更新 2：

我试图按照这个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);
}

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

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