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

Question

我有一个带有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");
        }
    });
});

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

Answer 2

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