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

从一个选择传递到另一个选择时保留数据

  • 772

我有以下情况，我想将数据从一个传递select到另一个，但将其保留在源中。我留下代码，看看你是否能帮助我。

示例：在起点和终点都有值10203 Shirt T-03 。

	$().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. 您可以做的是使用创建元素的副本clone()。这样你就可以保留原件并且不要移动它：

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

    请注意，在将选项传递给目的地之前，我正在验证它之前没有被传递。为了不重复相同的验证，我们可以创建一个小函数来负责复制到目标的工作：

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

    顺便说一句，您不需要使用return.

    • 3
  2. Best Answer

    只需在“.clone()”附加项中复制您不想删除的元素。像这样的东西：

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