0

Estoy usando un select múltiple para llenar un select simple. la idea es, si selecciono un valor y no existe, añadirlo al select simple, si existe no hago nada, pero si desactivo la opción, eliminarla del select simple. ¿Cómo podría hacer eso?

Por ejemplo, selecciono value1 y value2 y los agrego a simple select. Si elimino la selección de value1, debe eliminarse de simple select, pero value2 debe estar ahí.

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();

    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

1
  • ¿Con desactivar la opción a qué te refieres? ¿Que deben estar en "azul" en el select #foo para poder estar en el select #bar?
    – user85192
    Commented el 3 may. 2018 a las 6:23

1 respuesta 1

1

una manera simple y rápida de hacerlo es borrando el contenido del select simple cada vez que se realiza un cambio en el select multiple y añadiendo nuevamente la opción por defecto antes de agregar a través del foreach las opciones seleccionadas, por ejemplo con esta linea:

$('#bar').empty().append('<option selected disabled>Add some from multiple</option>');

Te dejo el ejemplo funcionando a continuación:

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();
    
    $('#bar').empty().append('<option selected disabled>Add some from multiple</option>');

    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

Tu Respuesta

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

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