Return values to Select with javascript, remove put options

Question

Return values to Select with javascript, remove put options

Navigation

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

1

Greetings I have this code, which removes the options to all the other select when one selects it first. But now I need to return the value to select another one.

Among them, for example, if I select the 1 in any, option 1 will disappear in the rest. If I select another option in this select, then the option that removes all the others will reappear.

I ask you please to help me, thank you in advance.

$(document).on('change','.sel',function(){
  $(this).siblings().find('option[value="'+$(this).val()+'"]').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
  <option>Seleccion AA</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel">
  <option>Seleccion BB</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel">
  <option>Seleccion CC</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

javascript html

asked by Rob Amaya 21.06.2017 в 18:33

source

3 answers

Show image from the folder of a protected server with .htpasswd add dynamic input and select

score 1 · Answer 1

You can save the original options in each select with data :

$(this).data('original', $(this).html());

And then restore it with

$(this).html($(this).data('original'));

$(".sel").each(function() {
  // Al cargar el documento guardo las opciones originales
  $(this).data('original', $(this).html());
});
$(document).on('change', '.sel', function() {
  $('.sel').each(function() {
    // Restauro  todas las opciones para todos los elementos 
    var valor = $(this).val();
    $(this).html($(this).data('original'));
    $(this).val(valor);
  });
  
  $('.sel').each(function() { 
  // borro las opciones  que no están seleccionadas 
    $(this).siblings().find('option[value="' + $(this).val() + '"]').remove();
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
  <option>Seleccion AA</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel">
  <option>Seleccion BB</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel">
  <option>Seleccion CC</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

score 0 · Answer 2

If I understood correctly, it would be something like this:

$(document).on('change','.sel',function(){

  if($(this).hasClass('uno')){
      $(this).siblings().find('option[value]').removeAttr('disabled')
  		$(this).siblings().find('option[value="'+$(this).val()+'"]').attr('disabled', true);
  }
  if($(this).hasClass('dos')){
  		
      $('.tres option[value]').removeAttr('disabled');
      $('.tres option[value="'+$('.uno').val()+'"]').attr('disabled', true);
      $('.tres option[value="'+$('.dos').val()+'"]').attr('disabled', true);
     
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="sel uno">
  <option>Seleccion AA</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel dos">
  <option>Seleccion BB</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select class="sel tres">
  <option>Seleccion CC</option>
	<option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

score 0 · Answer 3

Does not work with tables

$(".sel").each(function() {
  $(this).data('original', $(this).html());
});
$(document).on('change', '.sel', function() {
  $('.sel').each(function() {

    var valor = $(this).val();
    $(this).html($(this).data('original'));
    $(this).val(valor);
  });

  $('.sel').each(function() {

    $(this).siblings().find('option[value="' + $(this).val() + '"]').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <select class="sel">
              <option>Seleccion AA</option>
            	<option value="1">a</option>
              <option value="2">b</option>
              <option value="3">c</option>
            </select>
      </td>
    </tr>
    <tr>
      <td>
        <select class="sel">
              <option>Seleccion BB</option>
              <option value="1">a</option>
              <option value="2">b</option>
              <option value="3">c</option>
            </select>
      </td>
    </tr>
    <tr>
      <td>
        <select class="sel">
              <option>Seleccion CC</option>
            	<option value="1">a</option>
              <option value="2">b</option>
              <option value="3">c</option>
            </select>
      </td>
    </tr>
  </tbody>
</table>

<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>