Issue
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();
});
Solution
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>Answered By – ruleboy21
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0