在 JQuery 中，如何将选择选项的子集从一个选择菜单复制到另一个？答案

【问题标题】：In JQuery, how do I copy a subset of select options from one select menu to another?在 JQuery 中，如何将选择选项的子集从一个选择菜单复制到另一个？
【发布时间】：2015-03-15 12:26:03
【问题描述】：

我正在使用 JQuery 1.11.1。我有两个选择菜单元素，一个包含类似的选项

<select id="select1">
    <option value="A">option A</option>
    <option value="B">option B</option>
    ...
    <option value="">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>
    ...
</select>

如何将选项复制到并包括带有 "=============" 文本到第二个选择菜单（假设第二个选择菜单有 id='select2'）。

谢谢，- 戴夫

【问题讨论】：

标签： javascript jquery options copying select-menu

【解决方案1】：

第一个解决方案：

你可以这样做：

var emptyOption = $("#select1 option").filter(function() {
                     return $.trim( $(this).val() ) == '';
                  });
var $options = emptyOption.prevAll().addBack().clone();
$('#select2').append($options);

JSFiddle：http://jsfiddle.net/inanda/uosvokdr/2/

第二种解决方案：

如果您可以在要复制的选项中添加类，则可以通过以下方式进行。

HTML

<select id="select1">
    <option value="A" class="copy">option A</option>
    <option value="B" class="copy">option B</option>

    <option value="" class="copy">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>

</select>

<select id="select2">
</select>

Javascript：

var $options = $("#select1 > option.copy").clone();

$('#select2').append($options);

工作 JsFiddle：http://jsfiddle.net/inanda/m2qd177u/1/

【讨论】：

好的开始，但你漏掉了<option value="">=============</option>
您不应该使用andSelf，因为它在 1.8 中已被弃用。您应该使用addBack，它是替代品并且工作方式相同。您还可以将您的初始行简化为 var emptyOption = $("#select1 option[value='']"); 并消除对 filter 的需要（尽管这不会处理您添加到您的 trim）
是的，这就是我添加过滤器的原因。我不知道他是如何创建这个 HTML 的。最好在我不知道的情况下防止出现问题。但如果你确定它永远不需要修剪，那么它会更简单。

【解决方案2】：

var option, count = -1;
while ((option = $('#select1 option')[++count]).value != "")
{
  $(option).clone().appendTo('#select2');
}
$($('#select1 option')[count]).clone().appendTo('#select2'); //for the '=====' one

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
    <option value="A">option A</option>
    <option value="B">option B</option>
    <option value="">=============</option>
    <option value="AA">option AA</option>
    <option value="BB">option BB</option>
</select>

<select id="select2">
</select>

【讨论】：

与实际做法无关，只是一些关于优化和可读性的cmets。您应该真正缓存该 jquery 对象，而不是在循环的每次迭代中重新查询 DOM。您还可以考虑使用 jquery 的 .eq 来获取元素，而不是展开和重新包装元素。