如何将 <options> 从一个选择列表复制到另一个？答案

【问题标题】：How do I copy the <options> from one select list, to another?如何将 <options> 从一个选择列表复制到另一个？
【发布时间】：2012-06-19 19:01:08
【问题描述】：

我正在尝试将<options> HTML 代码从一个选择列表复制到另一个。我已经测试了下面的脚本，但它不起作用。

我已经使用“警报”功能进行了测试，但它似乎只显示之前选项中的值。

谁能推荐我应该使用什么？谢谢！

$("select[name='NHIndexNo" + tablecounter + "_" + rowCount + "'] option").each(function(){
   $("select[name='NHIndexNo" + tablecounter + "_" + (rowCount+1) + "'] option").appendto($(this).val());
});

【问题讨论】：

你也能显示你的 HTML 吗？
appendto($(this).val())?那是 appendTo 和 $(this).val() 不是一个元素。

标签： jquery jquery-selectors options

【解决方案1】：

jQuery：

$().ready(function() {  
     $('#add').click(function() {  
        return !$('#select1 option:selected').remove().appendTo('#select2');  
     });  
     $('#remove').click(function() {  
        return !$('#select2 option:selected').remove().appendTo('#select1');  
     });  
 });

HTML：

<div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
</div>  
<div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
</div>

演示： http://jsfiddle.net/LbPAq/1

【讨论】：

只是想知道，为什么你有.remove() 在那里？在我的测试中，.appendTo() 无论如何都会这样做。
@JeffreyKemp .remove() 用于从第一个选择框中删除所选项目。 .appendTo() 将该项目附加到第二个选择框。
你试过没有.remove()吗？它仍然会删除它。
你是对的。出现这种情况的主要原因是appendTo() 将选择器插入到目标容器中。如果我们要使用.append()，那么我们需要使用.remove()。

【解决方案2】：

只需尝试 - http://jsfiddle.net/zDFdX/

   $("#stwo").html( $("#sone").html() );

HTML

    <select id="sone">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <select id="stwo">

    </select>

【讨论】：

【解决方案3】：

$("select[name='NHIndexNo" + tablecounter + "_" + rowCount + "'] option").each(function(){
   $("select[name='NHIndexNo" + tablecounter + "_" + (rowCount+1) + "']").append($(this).clone());
});

你说得差不多

【讨论】：

【解决方案4】：

先克隆元素，然后再将它们附加到另一个选择元素：

$("select[name='NHIndexNo" + tablecounter + "_" + rowCount + "'] option")
 .clone() // <-- creates a copy of each selected element
 .appendTo("select[name='NHIndexNo" + tablecounter + "_" + (rowCount+1) + "']");

由于您没有提供任何上下文信息或标记，我假设选择器是正确的。

【讨论】：

【解决方案5】：

没有看到您的 HTML，因此我只能猜测您的选择器工作正常，我建议：

$("select[name='NHIndexNo" + tablecounter + "_" + (rowCount+1) + "'] option").clone(true).appendTo($(this).val());

想法是克隆元素（匹配选择器），然后将 clone 附加到另一个 select 元素。

另外请注意，我已将true（withDataAndEvents 参数）传递给clone() 方法；这是使用 jQuery 复制分配给这些元素的数据和事件。如果您不关心被克隆的内容，请忽略此参数。

参考资料：

clone()。

【讨论】：