Tengo 2 selecciones. Ambos tienen las mismas opciones (tomadas de db). Digamos que las opciones son:
Inventory 1 Inventory 2 Inventory 3 Si elijo Inventory 1 en la primera selección, en la segunda selección debería desaparecer. Si elijo el Inventory 2 en la primera selección, el Inventory 1 debería volver a aparecer en la segunda selección y el Inventory 2 debería desaparecer.
Este es mi código hasta ahora:
$('#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(); });Prueba esto
$('#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>Sé que ya ha aceptado una respuesta, pero aquí hay un enfoque diferente sin duplicar el código. Solo hay un controlador de eventos, y el comportamiento que describe funciona para ambas selecciones: cualquier opción que seleccione de cualquier selección desaparecerá de la otra selección.
De hecho, su pregunta no especifica que desea que suceda algo para los cambios en la segunda selección, ¿verdad? Así que esto es solo una demostración de algo que puede ser útil :-)
$('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>