1

Navegando encontré una manera para ocultar una option de varios select dependiendo de la id, eso me ayudó mucho.

Lo que estoy intentado de hacer es que al cambiar la option esta vuelva a ser visible en todos los select para poder seleccionarla.

No es nada del otro mundo, son 9 select con las mismas opciones y 2 de ellos tienen la misma id para el ejemplo.

$(document).on('change','.sel',function(){
//aqui oculta la option de los demas select
 $('#one select').siblings().find('option[value="'+$(this).val()+'"]').hide();

});

$(document).ready ( function(){
//esta es una prueba para ocultar una option al cargar, no es importante 
  var id = 1;
  $('#one select').siblings().find('option[value="'+id+'"]').hide();


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="one">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>  
  <tr id="one">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>
    <tr id="dos">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>
</table>

2
  • Evita el uso de repetir las ids, esta es una manera de identificar a algo unico digamos. Si quieres ampliar la selección deberias usar clases.
    – GDP
    el 10 ago. 2017 a las 8:08
  • Entendido... Gracias por la ayuda el 10 ago. 2017 a las 8:13

2 respuestas 2

0

Intentando seguir un poco tu código.

  1. La funcion change lo que hace es llamar a cambiar.
  2. La funcion cambiar se encarga de revisar todos los select y guardar sus opciones seleccionadas en un array, en la misma posición que tiene su valor medainte each. He aprovechado que tienes como valores números.
  3. Antes de guardar los casteo con parseInt para poder manejarlos mejor.
  4. Despues recorro el array y comparo sus valores con undefined. De esta forma, se si ese valor esta seleccionado en alguna opcion o no.
  5. Por último, si el valor es undefined saco la posicion de ese valor en el array siendo este el número a mostrar.

No se si me he explicado bien, dale una vuelta y me dices :)

He corregido errores ortográficos. Evita repetir las ids, son identificadores únicos.

$(".sel").change(function(){cambiar();});

function cambiar(){
  var array = [];
  $(".sel :selected").each(function(){
    array[$(this).val()]=(parseInt($(this).val()));
  });
  for(i=0;i<array.length;i++){
   if(array[i]!=undefined){
      $(".sel option[value=" + array[i] + "]").hide();
    }
    if(array[i]==undefined){
      $(".sel option[value=" + i + "]").show();
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="uno">
    <td>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option> 
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
    </td>
  </tr>  
  <tr id="dos">
    <td>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
    </td>
  </tr>
    <tr id="tres">
    <td>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
      <select class="sel">
        <option value="0">Selecciona</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
      </select>
    </td>
  </tr>
</table>

1
  • 1
    Tu ejemplo me quedo claro, y gracias por corregir los errores gramaticales. el 10 ago. 2017 a las 8:11
0

Mira a ver si esto te sirve

$(document).on('change','.sel',function(){
var selecteds='|'
//Recorremos todos los select y vemos que opcion esta marcada en cada uno
//y los concatenamos en un string para su posterior busqueda.
selecteds+=$('#one select').map(function(){
   if($(this).val().indexOf('Selecciona')==-1){
    return $(this).val();
   }
})
.get()
.join('|');

selecteds+='|';

//Recorremos todos los options
$('#one select').siblings().find('option').each(function(i,e){
  //Si el valor del option a comprobar no esta seleccionado en ninguno otro...
  if(selecteds.indexOf('|'+$(e).val()+'|')==-1){
    //Lo mostramos
    $(this).show();
  }
});
//aqui oculta la option de los demas select
$('#one select').siblings().find('option[value="'+$(this).val()+'"]').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="one">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>  
  <tr id="one">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>
    <tr id="dos">
    <td>
      <select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">One</option>
  <option value="2">Tow</option>
  <option value="3">Three</option>
  <option value="4">Ford</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">echt</option>
  <option value="9">nine</option>
  <option value="10">then</option> 
</select>
    </td>
  </tr>
</table>

2
  • Muchas Gracias funciono a la prefeccion... el 10 ago. 2017 a las 7:38
  • Me alegro, para eso estamos ;)
    – Hictus
    el 10 ago. 2017 a las 7:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.