jQuery Chosen Multiple Select Menus: Show / Hide Options

Question

I have a form with 3 jQuery Chosen dropdown select menus. How can I make it so that when an option becomes selected in one of the menus, it becomes hidden in the other 2? Also, if the user selects something else or blank, that option should become available in the other 2 menus once again. Thank you for any help.

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");
        }
    });
});

With the code I have now, it does hide the option however, if I change it to something else, it doesn't re-show the option in the other select menus. It stays hiden. — GTS Joe, Aug 17 '14 at 03:00
I'm not a jQuery Chosen user, but have you ever tried removing `$("select#genre_1").trigger("chosen:updated");` and see whether it gets hidden ? Because I see on another question you don't really need that to hide the `select`. — Bla..., Aug 17 '14 at 03:19
hide() is working, show() is what isn't. That line of code is needed to trigger changes in Chosen. — GTS Joe, Aug 17 '14 at 03:29

score 2 · Accepted Answer · edited Aug 17 '14 at 07:21

2

EDITED, WORKING SOLUTION:

Well, the wrong part in your code is that when you change the option to "", It can't get what option is selected before. That's way it can't give you the expected result. To better understand the problem, you can put console.log(selectedVal) in both if and see the output. So, change your posted jQuery into this, It should give you the same result..

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

Check out this Fiddle.

edited Aug 17 '14 at 07:21

GTS Joe

3,612
12
52
94

answered Aug 17 '14 at 03:29

Bla...

7,228
7
27
46

Your code does not work. I copied and pasted it into my script and it's worst than my original code. It doesn't even hide selected options. :( – GTS Joe Aug 17 '14 at 06:04
1

Well maybe because I remove the `.trigger("chosen:updated");`.. Check out the Fiddle.. I don't use jQuery Chosen in the Fiddle. – Bla... Aug 17 '14 at 06:08
1

Great! By adding back the line $('.chosenGenreData').trigger('chosen:updated'); it works perfectly in the Chosen jQuery plugin. Please edit your answer by inserting that line under .hide(). As soon as you do I'll mark your answer as accepted. Thank you very much. :) – GTS Joe Aug 17 '14 at 07:21
Done.. Glad that I can help.. ^^ – Bla... Aug 17 '14 at 07:22

score 0 · Answer 2 · answered Sep 21 '19 at 05:59

0

You can show/hide with Value or Class name. Check the below link with exp. Show/hide jquery chosen options with value or with class name.

answered Sep 21 '19 at 05:59

Sandeep Sherpur

2,418
25
27

jQuery Chosen Multiple Select Menus: Show / Hide Options

HTML

jQuery

2 Answers2