jQuery Chosen Multiple Select Menus: Show / Hide Options

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

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.