Keep the data when going from one select to another

Question

Keep the data when going from one select to another

Navigation

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

3

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

Example: have the value 10203 T-03 T-Shirt at both the origin and 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 jquery

asked by Yoel Rodriguez 08.08.2017 в 21:20

source

2 answers

3

What you can do is create a copy of the element using clone() . This way you keep the original and do not 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 previously passed. In order not to repeat the same validation, we can create a small function that will take care of the job of copying 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 do not need to use return .

answered by 08.08.2017 в 21:31

Doubt binary search recursive unsorted vector Configure locales in PHP

score 2 · Accepted Answer

Just make a copy of the elements that you do not want to be deleted in the append ".clone ()". Something like this:

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