jQuery选择多选菜单：显示/隐藏选项答案

【问题标题】：jQuery Chosen Multiple Select Menus: Show / Hide OptionsjQuery选择多选菜单：显示/隐藏选项
【发布时间】：2014-08-17 01:42:20
【问题描述】：

我有一个带有 3 个 jQuery Chosen 下拉选择菜单的表单。我怎样才能做到这一点，当一个选项在其中一个菜单中被选中时，它会隐藏在另外两个菜单中？此外，如果用户选择其他内容或空白，则该选项应再次在其他 2 个菜单中可用。感谢您的帮助。

HTML

<form action="" method="post" class="addEdit">
    <label for="genre_1">Genre 1:</label>
    <select name="genre_1" id="genre_1" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
    <br><label for="genre_2">Genre 2:</label>
    <select name="genre_2" id="genre_2" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
    <br><label for="genre_3">Genre 3:</label>
    <select name="genre_3" id="genre_3" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
</form>

jQuery

$(function() {
    $(".chosenGenreData").chosen();

    $('#genre_1').change(function() {
        var selectedVal = $(this).val();
        if (selectedVal != '') {
            $("select#genre_2 option[value='"+selectedVal+"']").hide();
            $("select#genre_2").trigger("chosen:updated");
            $("select#genre_3 option[value='"+selectedVal+"']").hide();
            $("select#genre_3").trigger("chosen:updated");
        }
        if (selectedVal == '') {
            $("select#genre_2 option[value='"+selectedVal+"']").show();
            $("select#genre_2").trigger("chosen:updated");
            $("select#genre_3 option[value='"+selectedVal+"']").show();
            $("select#genre_3").trigger("chosen:updated");
        }
    });
    $('#genre_2').change(function() {
        var selectedVal = $(this).val();
        if (selectedVal != '') {
            $("select#genre_1 option[value='"+selectedVal+"']").hide();
            $("select#genre_1").trigger("chosen:updated");
            $("select#genre_3 option[value='"+selectedVal+"']").hide();
            $("select#genre_3").trigger("chosen:updated");
        }
        if (selectedVal == '') {
            $("select#genre_1 option[value='"+selectedVal+"']").show();
            $("select#genre_1").trigger("chosen:updated");
            $("select#genre_3 option[value='"+selectedVal+"']").show();
            $("select#genre_3").trigger("chosen:updated");
        }
    });
    $('#genre_3').change(function() {
        var selectedVal = $(this).val();
        if (selectedVal != '') {
            $("select#genre_1 option[value='"+selectedVal+"']").hide();
            $("select#genre_1").trigger("chosen:updated");
            $("select#genre_2 option[value='"+selectedVal+"']").hide();
            $("select#genre_2").trigger("chosen:updated");
        }
        if (selectedVal == '') {
            $("select#genre_1 option[value='"+selectedVal+"']").show();
            $("select#genre_1").trigger("chosen:updated");
            $("select#genre_2 option[value='"+selectedVal+"']").show();
            $("select#genre_2").trigger("chosen:updated");
        }
    });
});

【问题讨论】：

你的方法有什么问题？
使用我现在拥有的代码，它确实隐藏了该选项，但是，如果我将其更改为其他内容，它不会在其他选择菜单中重新显示该选项。它保持隐藏状态。
我不是 jQuery Chosen 用户，但你有没有试过删除 $("select#genre_1").trigger("chosen:updated"); 并查看它是否被隐藏？因为我在另一个问题上看到你真的不需要隐藏select。
hide() 有效， show() 无效。需要这行代码来触发 Chosen 中的更改。

标签： jquery select option jquery-chosen multiple-select

【解决方案1】：

已编辑，可行的解决方案：

好吧，代码中的错误部分是，当您将选项更改为"" 时，它无法获取之前选择的选项。这样它就不能给你预期的结果。为了更好地理解问题，您可以将console.log(selectedVal) 放入if 并查看输出。所以，把你发布的 jQuery 改成这个，它应该会给你同样的结果..

function resetOptions(){
    $(".chosenGenreData").each(function(){
        $(this).children("option").show();
    });
}
$('.chosenGenreData').change(function() {
    resetOptions();
    $(".chosenGenreData").each(function(){
        var selectedVal = $(this).val();
        var attrID = $(this).prop("id");
        $(".chosenGenreData").each(function(){
            if($(this).prop("id") != attrID){
                if(selectedVal != ""){
                    $(this).children("option[value="+selectedVal+"]").hide();
                    $('.chosenGenreData').trigger('chosen:updated');
                }
            }
        });
    });
});

看看这个Fiddle。

【讨论】：

您的代码不起作用。我将它复制并粘贴到我的脚本中，它比我的原始代码更糟糕。它甚至不隐藏选定的选项。 :(
好吧，也许是因为我删除了.trigger("chosen:updated");.. 看看小提琴.. 我不使用在小提琴中选择的 jQuery。
太棒了！通过添加行 $('.chosenGenreData').trigger('chosen:updated');它在 Chosen jQuery 插件中完美运行。请通过在 .hide() 下插入该行来编辑您的答案。只要您这样做，我就会将您的答案标记为已接受。非常感谢。 :)
完成.. 很高兴我能帮上忙.. ^^

【解决方案2】：

您可以使用值或类名称显示/隐藏。使用 exp 检查以下链接。 Show/hide jquery chosen options with value or with class name.

【讨论】：