Tengo el siguiente código HTML simple con SELECT con los mismos formularios de clase con valores de opciones idénticos

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

Solo quiero hacer clic en un menú desplegable dinámico y ocultar el valor de ALL SELECT con una clase.

jQuery.each($("select.gr-fields-select"), function(){            
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})

Por favor, consulte el jdfiddle aquí: https://jsfiddle.net/mhassan94/d6j3fpt2/3/

Si selecciona un valor desplegable, se ocultan del menú desplegable Todos, pero si cambian el valor desplegable de selección, muestran el valor anterior y ocultan el nuevo valor en el menú desplegable Todos.

¿Cómo es eso mejor de lograr?

0
MHassan 26 abr. 2020 a las 14:16

2 respuestas

¿Es esto lo que quieres hacer?

$(".gr-fields-select").change(function(){
  var selectedValue = $(this).val();
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value!=selectedValue){
          $(option).show();
        }else{
          $(option).hide();
        }
      });
    }  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>
<label>Second</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>
0
Thilanka Deshan-minion91 26 abr. 2020 a las 12:50

Entonces, en la categoría de no reinventar la rueda. Estoy pensando que una selección múltiple como select2 podría lograr lo que desea mucho más fácilmente que los múltiples menús desplegables. select 2 incluso te permite limitar la longitud de tu selección si solo quieres dos. Creo que con múltiples menús desplegables hay mucho que rastrear. ya que en ellos eligen las selecciones fuera de servicio. ejecute el fragmento a continuación para ver una posible implementación utilizando una selección múltiple

$(document).ready(
    function () {
        $("#multipleSelectExample").select2({
          maximumSelectionLength: 2,
          closeOnSelect: false,
          allowClear: true
        });
    }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">

<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
0
Bryan Dellinger 26 abr. 2020 a las 12:54