3

Tengo la siguiente situación, quiero pasar datos de un select a otro pero que me lo mantenga en el de origen. Les dejo el código para ver si me pueden ayudar.

Ejemplo: tener el valor 10203 Playera T-03 tanto en el origen como en el destino.

	$().ready(function() 
		{
		$('.pasar').click(function() { return !$('#origen option:selected').appendTo('#destino'); });  
		$('.quitar').click(function() { return !$('#destino option:selected').remove().appendTo('#origen'); });
		$('.pasartodos').click(function() { $('#origen option').each(function() { $(this).appendTo('#destino'); }); });
		$('.quitartodos').click(function() { $('#destino option').each(function() { $(this).remove().appendTo('#origen'); }); });
		$('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="origen[]" id="origen" multiple="" class="span5" size="9">
  <option value="">Producto</option><option value="10202">10202 Playera T-02</option>
  <option value="10203">10203 Playera T-03</option><option value="10204">10204 Playera T-04</option>       <option value="10206">10206 Playera T-06</option><option value="10208">10208 Playera T-08</option>
  <option value="10210">10210 Playera T-10</option><option value="10212">10212 Playera T-12</option>       <option value="10214">10214 Playera T-14</option><option value="10216">10216 Playera T-16</option>
  <option value="10218">10218 Playera T-18</option>
 </select>
 <input type="button" class="pasar izq" value="Pasar »">&nbsp;<input type="button" class="pasartodos izq" value="Pasar Todos »"><br /><br />		
 <select name="destino[]" id="destino" multiple="" class="span5" size="9" required="true">
			</select>
<input type="button" class="quitar der" value="« Quitar">&nbsp;<input type="button" class="quitartodos der" value="« Quitar Todos">      

2
  • gracias a todos por su ayuda el 8 ago. 2017 a las 20:45
  • y cómo enviarías ese primer value a un input, por ejemplo, y el nombre al select? quiero decir: <option value="10218" (este enviarlo a un input)>Playera T-18 (al select)</option> no se si me explico, si se puede hacer o no Gracias
    – user68481
    el 5 abr. 2018 a las 14:53

2 respuestas 2

3

Lo que puedes hacer es crear una copia del elemento usando clone(). De esta manera mantienes el original y no lo mueves:

$(document).ready(function() {
    $('.pasar').click(function() { 
        var opcion = $('#origen option:selected').clone();
        var valor = $(opcion).val();
        // Verificar si ya se pasó esta opción
        if ($("#destino option[value=" + valor + "]").length == 0) {
            $(opcion).appendTo('#destino'); 
        }
    });
    $('.pasartodos').click(function() { 
        $('#origen option').each(function() {
            var opcion = $(this).clone();
            var valor = $(opcion).val();
            // Verificar si ya se pasó esta opción
            if ($("#destino option[value=" + valor + "]").length == 0) {
                $(opcion).appendTo('#destino'); 
            }
        }); 
    });  
    $('.quitar').click(function() { 
        $('#destino option:selected').remove(); 
    });
    $('.quitartodos').click(function() { 
        $('#destino option').each(function() { 
            $(this).remove(); 
        }); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="origen[]" id="origen" multiple="" class="span5" size="9">
    <option value="">Producto</option>
    <option value="10202">10202 Playera T-02</option>
    <option value="10203">10203 Playera T-03</option>
    <option value="10204">10204 Playera T-04</option>       
    <option value="10206">10206 Playera T-06</option>
    <option value="10208">10208 Playera T-08</option>
    <option value="10210">10210 Playera T-10</option>
    <option value="10212">10212 Playera T-12</option>       
    <option value="10214">10214 Playera T-14</option>
    <option value="10216">10216 Playera T-16</option>
    <option value="10218">10218 Playera T-18</option>
 </select>
 <input type="button" class="pasar izq" value="Pasar »">&nbsp;
 <input type="button" class="pasartodos izq" value="Pasar Todos »">
 <br /><br />		
 <select name="destino[]" id="destino" multiple="" class="span5" size="9" required="true">
 </select>
 <input type="button" class="quitar der" value="« Quitar">&nbsp;
 <input type="button" class="quitartodos der" value="« Quitar Todos">      

Observa que antes de pasar la opción al destino estoy validando que ya no se haya pasado anteriormente. Para no repetir la misma validación, podemos crear una pequeña función que se encargue del trabajo de copiar al destino:

function copiarOpcion(opcion, destino) {
    var valor = $(opcion).val();
    if ($(destino + " option[value=" + valor + "]").length == 0) {
        $(opcion).appendTo(destino); 
    }
}


$(document).ready(function() {
    $('.pasar').click(function() { 
        copiarOpcion($('#origen option:selected').clone(), "#destino");
    });
    $('.pasartodos').click(function() { 
        $('#origen option').each(function() {
            copiarOpcion($(this).clone(), "#destino");
        }); 
    });  
    $('.quitar').click(function() { 
        $('#destino option:selected').remove(); 
    });
    $('.quitartodos').click(function() { 
        $('#destino option').each(function() {
            $(this).remove(); 
        }); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="origen[]" id="origen" multiple="" class="span5" size="9">
    <option value="">Producto</option>
    <option value="10202">10202 Playera T-02</option>
    <option value="10203">10203 Playera T-03</option>
    <option value="10204">10204 Playera T-04</option>       
    <option value="10206">10206 Playera T-06</option>
    <option value="10208">10208 Playera T-08</option>
    <option value="10210">10210 Playera T-10</option>
    <option value="10212">10212 Playera T-12</option>       
    <option value="10214">10214 Playera T-14</option>
    <option value="10216">10216 Playera T-16</option>
    <option value="10218">10218 Playera T-18</option>
 </select>
 <input type="button" class="pasar izq" value="Pasar »">&nbsp;
 <input type="button" class="pasartodos izq" value="Pasar Todos »">
 <br /><br />		
 <select name="destino[]" id="destino" multiple="" class="span5" size="9" required="true">
 </select>
 <input type="button" class="quitar der" value="« Quitar">&nbsp;
 <input type="button" class="quitartodos der" value="« Quitar Todos">      

Por cierto, no necesitas usar los return.

2

Solo haz una copia de los elementos que no quieres que se borren en el append ".clone()". Algo asi:

	$().ready(function() 
		{
		$('.pasar').click(function() { return !($('#origen option:selected').clone()).appendTo('#destino'); });  
		$('.quitar').click(function() { return !$('#destino option:selected').remove().appendTo('#origen'); });
		$('.pasartodos').click(function() { $('#origen option').each(function() { ($(this).clone()).appendTo('#destino'); }); });
		$('.quitartodos').click(function() { $('#destino option').each(function() { $(this).remove().appendTo('#origen'); }); });
		$('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="origen[]" id="origen" multiple="" class="span5" size="9">
  <option value="">Producto</option><option value="10202">10202 Playera T-02</option>
  <option value="10203">10203 Playera T-03</option><option value="10204">10204 Playera T-04</option>       <option value="10206">10206 Playera T-06</option><option value="10208">10208 Playera T-08</option>
  <option value="10210">10210 Playera T-10</option><option value="10212">10212 Playera T-12</option>       <option value="10214">10214 Playera T-14</option><option value="10216">10216 Playera T-16</option>
  <option value="10218">10218 Playera T-18</option>
 </select>
 <input type="button" class="pasar izq" value="Pasar »">&nbsp;<input type="button" class="pasartodos izq" value="Pasar Todos »"><br /><br />		
 <select name="destino[]" id="destino" multiple="" class="span5" size="9" required="true">
			</select>
<input type="button" class="quitar der" value="« Quitar">&nbsp;<input type="button" class="quitartodos der" value="« Quitar Todos">      

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.