Hide selected option from another select box

Question

Edit, yes I am aware of this question but that answer is not completely working for my case

I'm looking for a solution for this case

When a user selects an option from one select box the option should be hidden for the other select boxes.
When a selected option changes or is removed (select a blank option) the previously selected option should become available again to the other select boxes.

The problem with my current code:

When an option changes, the previous option is not "released" to the other select boxes so they can not use it again until the page reloads.
Basically, results in previously selected options are dissapearing from other select boxes.

I included a fiddle so you can see it for youself.

 $(document).ready(function() { // this "initializes the boxes" $('.update-select').each(function(box) { var value = $('.update-select')[box].value; if (value) { $('.update-select').not(this).find('option[value="' + value + '"]').hide(); } }); // this is called every time a select box changes $('.update-select').on('change', function(event) { var prevValue = $(this).data('previous'); $('.update-select').not(this).find('option[value="' + prevValue + '"]').show(); var value = $(this).val(); if (value) { $(this).data('previous', value); console.log($(this).data('previous', value)); $('.update-select').not(this).find('option[value="' + value + '"]').hide(); } }); }); 

 * { box-sizing: border-box; font-size: 1em; font-family: sans-serif; } body { display: flex; float: right; } body div { margin: 20px; } select { border: 2px solid #78909c; padding: 10px; border-radius: 5px; outline: none } select:focus { border: 2px solid #ff9800; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h3>stock 1</h3> <select name="tracker[stockitems][0]" class="update-select"> <option value=""></option> <option value="1" selected>tracker 1</option> <option value="3">tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> <div> <h3>stock 2</h3> <select name="tracker[stockitems][1]" class="update-select"> <option value=""></option> <option value="1">tracker 1</option> <option value="3" selected>tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> <div> <h3>stock 3</h3> <select name="tracker[stockitems][2]" class="update-select"> <option value=""></option> <option value="1">tracker 1</option> <option value="3">tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> 

Answer 1

It's as simple as this. Just .show() all the option 's and reinitialize the select 's using your previous code.

 $(document).ready(function() { function intializeSelect() { // this "initializes the boxes" $('.update-select').each(function(box) { var value = $('.update-select')[box].value; if (value) { $('.update-select').not(this).find('option[value="' + value + '"]').hide(); } }); }; intializeSelect(); // this is called every time a select box changes $('.update-select').on('change', function(event) { $('.update-select').find('option').show(); intializeSelect(); }); }); 

 * { box-sizing: border-box; font-size: 1em; font-family: sans-serif; } body { display: flex; float: right; } body div { margin: 20px; } select { border: 2px solid #78909c; padding: 10px; border-radius: 5px; outline: none } select:focus { border: 2px solid #ff9800; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h3>stock 1</h3> <select name="tracker[stockitems][0]" class="update-select"> <option value=""></option> <option value="1" selected>tracker 1</option> <option value="3">tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> <div> <h3>stock 2</h3> <select name="tracker[stockitems][1]" class="update-select"> <option value=""></option> <option value="1">tracker 1</option> <option value="3" selected>tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> <div> <h3>stock 3</h3> <select name="tracker[stockitems][2]" class="update-select"> <option value=""></option> <option value="1">tracker 1</option> <option value="3">tracker 2</option> <option value="4">test tracker1</option> <option value="6">another tracker</option> <option value="9">the last tracker</option> </select> </div> 

Answer 2

This is my solution:

$(document).ready(function() {
    $(document).on('change', '.update-select', function(e) {
        $('option').show();

        var selectedOptionsGlobal = [];

        $.each($('.update-select'), function(key, select) {
            var selectedOptionValue = $(select).val();

            if (selectedOptionValue !== "") {
                selectedOptionsGlobal.push(selectedOptionValue);
            }
        });

        for (var i = 0; i < selectedOptionsGlobal.length; i++) {
            $('option[value="'+selectedOptionsGlobal[i]+'"]').hide();
        }
    });
});