hiding second select option based on first select option

Question

I have 2 selects. Both have the same options (taken from db). Let's say the options are:

Inventory 1
Inventory 2
Inventory 3

If I choose Inventory 1 in the first select, then in the second select it should disappear. If I choose Inventory 2 in the first select, then Inventory 1 should appear back in the second select and Inventory 2 should disappear.

This is my code so far:

$('#from-location').on('change', function() {
        from_location_value = $('#from-location option:selected').val();
        to_location_value = $('#to-location option:selected').val();

        $("#to-location option[value=" + from_location_value + "]").hide();
        
    });

Answer 1

Try this

 $('#from-location').on('change', function() { let fromValue = $('#from-location').val(); let options = $('#to-location option').show(); if( $(this).val() !== '' ){ options.siblings('option[value="' + fromValue + '"]').hide() } }); $('#to-location').on('change', function() { let toValue = $('#to-location').val(); let options = $('#from-location option').show(); if( $(this).val() !== '' ){ options.siblings('option[value="' + toValue + '"]').hide() } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="from-location"> <option value=""></option> <option value="Inventory 1">Inventory 1</option> <option value="Inventory 2">Inventory 2</option> <option value="Inventory 3">Inventory 3</option> </select> <select id="to-location"> <option value=""></option> <option value="Inventory 1">Inventory 1</option> <option value="Inventory 2">Inventory 2</option> <option value="Inventory 3">Inventory 3</option> </select>

Answer 2

I know you have already accepted an answer, but here's a different approach without duplicating code. There's only one event handler, and the behaviour you describe works for both selects - whichever option you select from whichever select will disappear from the other select.

In fact your question does not specify you want anything to happen for changes to the 2nd select, right? So this is just a demonstration of something maybe useful :-)

 $('select').on('change', function() { // Find the value we just chose let selected = $(this).val(); // Find the select which was not just changed let $otherSelect = $('select').not($(this)); // First unselect anything selected from the other select $otherSelect.val(''); // Re-display everything from the other select $('option', $otherSelect).show(); // Hide the currently selected option from the other select $('option[value="' + selected + '"]', $otherSelect).hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="from-location"> <option value="">Please select</option> <option value="Inventory 1">Inventory 1</option> <option value="Inventory 2">Inventory 2</option> <option value="Inventory 3">Inventory 3</option> </select> <select id="to-location"> <option value="">Please select</option> <option value="Inventory 1">Inventory 1</option> <option value="Inventory 2">Inventory 2</option> <option value="Inventory 3">Inventory 3</option> </select>