Home / Questions / 93681
Accepted
Yoel Rodriguez
Asked: 2020-08-09 11:20:28 +0800 CST 2020-08-09 11:20:28 +0800 CST

Keep the data when passing from one select to another

  • 772

I have the following situation, I want to pass data from one selectto another but keep it in the source. I leave the code to see if you can help me.

Example: have the value 10203 Shirt T-03 both in the origin and in the destination.

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

javascript

2 Answers

  1. What you can do is create a copy of the element using clone(). This way you keep the original and don't move it:

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

    Note that before passing the option to the destination I am validating that it has not been passed before. In order not to repeat the same validation, we can create a small function that takes care of the work of copying to the destination:

    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">

    By the way, you don't need to use the return.

    • 3
  2. Best Answer

    Just make a copy of the elements you don't want deleted in the ".clone()" append. Something like that:

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

    • 2