Javascript 根据复选框选择条件删除下拉选项

我为这个问题创建了一个JSFIDLE，如下所示：

HTML

果


馅饼



苹果
葡萄
二者都

JavaScript

$（文档）.ready（函数（）{
var whatSelected=新数组（）；
var piesOnly=假；
whatSelected.push（'fruit'）；//初始预设
var groupTypeField=$（'input[id*='groupType']）；
groupTypeField.on（'change'，function（）{
//警报（this.id）；
var thisId=this.id.split（'groupType_'）[1]；
//警报（thisId）；
var thisChecked=this.checked；
var key=“”；
如果（thisId==0）
key=“水果”；
其他的
key=“pies”；
//警报（键）；
if（whatSelected.indexOf（key）=-1&&thisChecked）{
所选内容。按（键）；
//警报（'push:'+按键）；
}
if（whatSelected.indexOf（key）！=-1&&！已选中）{
//警报（“拉：”+键）；
var指数=所选内容。indexOf（键）；
//警报（“索引：”+索引）；
如果（索引！=-1）{
所选内容。拼接（索引，1）；
//警报（'拉'+键）；
}
}
警报（“更改后：”+所选内容）；
如果（whatSelected.indexOf（'pies'）！=-1）{//pies已选中
如果（whatSelected.indexOf（'fruit'）！=-1）{//水果被选中，那么不仅仅是馅饼
piesOnly=假；
//如果不见了，在后面加上“Grapes”和“Both”
var=false；
$（'select[id*=“Use”]option'）。每个（函数（）{
如果（this.value==“Grapes”）{
存在=真；
}
});
如果（！存在）{
警报（“添加”）；
$（'select[id*=“Use”]'）。追加（'Grapes'）；
$（'select[id*=“Use”]）.append（'Both'）；
}
}else{//未检查水果
piesOnly=正确；
//从下拉列表中移除葡萄和两者
$（'select[id*=“Use”]”）。查找（'option[value=“Grapes”]”）.remove（）；$（'select[id*=“Use”]”）。查找（'option[value=“Both”]”）.remove（）；
警报（“删除”）；
}
}否则{//Pies未选中
如果（whatSelected.indexOf（'fruit'）！=-1）{//水果被选中，那么不仅仅是馅饼
piesOnly=假；
}否则{//未选择任何内容，恢复为“水果”
警报（'必须选择一个选项'）；
$（'span[title*='Fruit']）。子对象（0）.prop（'checked'，true）；
$（'span[title*='Pies']）。子项（0）.prop（'checked'，false）；
piesOnly=假；
所选内容。按下（'fruit'）；//将其添加回
}
//在下拉列表中添加“Grapes”和“Both”（如果没有）
var=false；
$（'select[id*=“Use”]option'）。每个（函数（）{
如果（this.value==“Grapes”）{
存在=真；
}
});
如果（！存在）{
警报（“添加”）；
$（'select[id*=“Use”]'）。追加（'Grapes'）；
$（'select[id*=“Use”]）.append（'Both'）；
}
}
});
});

假设我有两个复选框，水果和馅饼。
假设我有一个下拉列表，选项：苹果，葡萄，两者都有

因此，如果选择了“水果”，我希望所有选项都会出现在下拉列表中。 如果选择“派”，我只想要“苹果”，因为谁听说过“葡萄”派？（或是带“两者”的馅饼？）

水果是默认选择，必须始终至少选中一个复选框。我有一个数组“whatSelected”，它跟踪选中的复选框

如果我选择“Pies”并取消选择“Fruit”，我的代码将从下拉列表中删除“Grapes”和“Both”。（在下拉列表中留下“苹果”）

如果我随后重新选择“Fruit”，那么所有选项都会通过我使用jQuery重新附加选项的代码正确地添加回来

---

我的问题是，如果我取消选择“水果”，它就不会删除下拉列表中的“葡萄”和“两者”，这是我附加的选项。如何删除这些附加选项？谢谢。

事实上我找到了我的bug。。。。我必须在两个地方做追加——一个是选择了水果和馅饼，另一个是没有选择馅饼，但选择了水果。在其中一个地方，我有

$('select[id*="Use"]').append('<option val="Grapes">Grapes</option>');
$('select[id*="Use"]').append('<option val="Both">Both</option>');

$（'select[id*=“Use”]）.append（'Grapes'）；
$（'select[id*=“Use”]）.append（'Both'）；

我需要使用

value

，而不是

val

。这解决了我的问题

我没有让我的JSFIDLE崩溃，而是用这个补丁更新了它。但是上面的代码是原始的

我曾想过删除这个问题，但我认为如果我离开这个问题，对编码社区可能会有很多好处，因为这里的很多东西都是经常被问到的，可能会让一些人对如何实现我在这里做的一些事情有点疯狂

$(document).ready(function () {
    var whatSelected = new Array();
    var piesOnly = false;
    whatSelected.push('fruit'); // initial preset

    var groupTypeField = $('input[id*="groupType"]');
    groupTypeField.on('change', function () {
        //alert(this.id);
        var thisId = this.id.split('groupType_')[1];
        //alert(thisId);
        var thisChecked = this.checked;
        var key = "";
        if (thisId == 0)
            key = "fruit";
        else
            key = "pies";
        //alert(key);

        if (whatSelected.indexOf(key) == -1 && thisChecked) {
            whatSelected.push(key);
            //alert('push: ' + key);
        }
        if (whatSelected.indexOf(key) != -1 && !thisChecked) {
            //alert('pull: ' + key);
            var index = whatSelected.indexOf(key);
            //alert('index: ' + index);
            if (index != -1) {
                whatSelected.splice(index, 1);
                //alert('pulled ' + key);
            }
        }
        alert('after alteration: ' + whatSelected);

        if (whatSelected.indexOf('pies') != -1) { // Pies checked   
            if (whatSelected.indexOf('fruit') != -1) { // Fruit checked, so not Pies only
                piesOnly = false;
                // Add "Grapes" and "Both" back, if gone
                var exists = false;
                $('select[id*="Use"] option').each(function () {
                    if (this.value == "Grapes") {
                        exists = true;
                    }
                });
                if (!exists) {
                    alert('added');
                    $('select[id*="Use"]').append('<option val="Grapes">Grapes</option>');
                    $('select[id*="Use"]').append('<option val="Both">Both</option>');
                }
            } else { // Fruit not checked
                piesOnly = true;
                // Remove Grapes and Both from dropdown
                $('select[id*="Use"]').find('option[value="Grapes"]').remove(); $('select[id*="Use"]').find('option[value="Both"]').remove();
                alert('removed');
            }
        } else { // Pies not checked
            if (whatSelected.indexOf('fruit') != -1) { // Fruit checked, so not pies only
                piesOnly = false;

            } else {// nothing selected, revert to Fruit
                alert('Must select an option.');
                $('span[title*="Fruit"]').children(0).prop('checked', true);
                $('span[title*="Pies"]').children(0).prop('checked', false);
                piesOnly = false;
                whatSelected.push('fruit'); // add it back
            }

            // Add "Grapes" and "Both" back to dropdown, if gone
            var exists = false;
            $('select[id*="Use"] option').each(function () {
                if (this.value == "Grapes") {
                    exists = true;
                }
            });
            if (!exists) {
                alert('added');
                $('select[id*="Use"]').append('<option value="Grapes">Grapes</option>');
                $('select[id*="Use"]').append('<option value="Both">Both</option>');
            }

        }
    });
});

$('select[id*="Use"]').append('<option val="Grapes">Grapes</option>');
$('select[id*="Use"]').append('<option val="Both">Both</option>');