Question

我已经为这个问题创建了一个jsfiddle：http://jsfiddle.net/navyjax2/9xpbyodq/

HTML 的

<span title="Fruit" class="ms-RadioText">
    <input id="groupType_0" type="checkbox" checked="checked"/>
    <label>Fruit</label>
</span><br>
<span title="Pies" class="ms-RadioText">
    <input id="groupType_1" type="checkbox" />  
    <label>Pies</label>
</span>
<br><br>
<select id="Use_d8ffe43">
   <option value="Apples">Apples</option>
   <option value="Grapes">Grapes</option>
   <option value="Both">Both</option>
</select><BR><BR>

的JavaScript

$(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>');
            }

        }
    });
});

说我有2个复选框，水果和馅饼假设我有一个下拉菜单，选项：苹果，葡萄，两者

因此，如果选择“Fruit”，我希望所有选项都显示在下拉列表中。如果选择“馅饼”，我只想要“苹果”，因为谁听说过“葡萄”馅饼？（或用“两个”馅饼？）

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

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

如果我然后重新选择“Fruit”，则通过我用于使用jQuery重新附加选项的代码正确地添加选项。

我的问题是，如果我取消选择“Fruit”，那么它就不会在下拉列表中删除“Grapes”和“Both”，这是我的附加选项。如何删除这些附加选项？感谢。

Answer 1

实际上我发现了我的错误....我必须在两个地方做附加 - 一次如果选择水果和馅饼，另一个地方，当没有选择Pie时，但Fruit是。在其中一个地方，我有......

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

我需要使用val而不是value。这解决了我的问题。

我没有让我的jsfiddle破碎，而是用这个修复程序更新了它。但上面的代码是原始代码。

我考虑过删除这个问题，但是如果我离开这个问题，我认为编码社区会有很多好处，因为这里经常会遇到很多问题，并且可能会让人对如何实施我做过的一些事情，在这里。

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

1 个答案: