Show and hide select options

Question

Show and hide select options

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Navigating I found a way to hide a option of several select depending on the id , that helped me a lot.

What I am trying to do is to change the option it is visible again in all select to be able to select it.

It's nothing special, they are 9 select with the same options and 2 of them have the same id for the example.

$(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>

javascript jquery

asked by Alejandro Muñoz Schumacher 10.08.2017 в 08:54

source

2 answers

0

Look to see if this helps you

$(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>

answered by 10.08.2017 в 09:21

PHP minute counter Receive string data from the Date Range Picker to PHP plugin

score 0 · Accepted Answer

Trying to follow your code a bit.

The change function is calling cambiar .

The cambiar function is responsible for checking all select and saving your selected options in an array, in the same position that has its value medainte each . I have taken advantage of that you have values as numbers.

Before saving the casts with parseInt to be able to handle them better.

Then I go through the array and compare its values with undefined . This way, if this value is selected in some option or not.

Finally, if the value is undefined , I take the position of that value in array , this being the number to be displayed.

I do not know if I explained myself well, give it a spin and you tell me:)

I have corrected spelling errors. Avoid repeating the ids , they are unique identifiers.

$(".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>