从下拉列表中复制选项列表。 jQuery

Posted 2023-03-05

【中文标题】从下拉列表中复制选项列表。 jQuery

【英文标题】：Copy option list from dropdownlist. JQuery

【发布时间】：2011-05-24 22:44:59

【问题描述】：

html代码

<select id="dropdwon1">
 <option value="1">Item1</option>
 <option value="2">Item2</option>
 <option value="3">Item3</option>
</select>

<select id="dropdwon2"></select>

我需要使用 jQuery 将所有选项从 dropdown1 复制到 dropdown2。是否可以简单复制内容？

【参考方案1】：

$('#dropdwon1 option').clone().appendTo('#dropdwon2');

jsfiddle link

【讨论】：

@mola10：它确实有效——就像我写的那样。我刚刚为 jsfiddle 添加了一个链接。当它们是单项函数时，为什么要在 3 个项目的集合上调用 val、text 和 html？？

@mola10 他是对的，停止修改代码并声称它不起作用。

它有效！，谢谢。 “..你为什么要打电话给 val...” - 凌晨 2 点，累了，抱歉。

这很好用！我尝试不使用 clone()，但它正在删除它

我刚刚发现如果您使用 jQuery 变量来引用您的下拉列表（例如，_dropdown1 = $("#");) 那么您可以像这样克隆项目：_ddlColumnNames1.find('option').clone().appendTo(_ddldropdown2);

【参考方案2】：

你也可以让它“克隆”当前（不是初始）选定的项目吗？

$('#dropdwon1 option').eq(1).attr('selected', 'selected');
$('#dropdwon1 option').clone().appendTo('#dropdwon2');​

【参考方案3】：

Jquery 克隆通常是要走的路，但它不适用于以下项目 选择检查和单选

解决方法是在克隆之前设置html dom属性，这是我的做法

var selects = $('form').find('select') ;
selects.each ( function ( ) 
var selvalue = $( this ).val() ;
var options = $( this ).find('option') ;
options.each ( function () 
    if ( $( this ).attr( 'value' )  == selvalue ) 
        $( this ).attr( 'selected' , true ) ; 
    );
) ; 
$('form').clone.appendTo( '#target' )

将选定的dom属性设置为true允许克隆有效地复制值

【参考方案4】：

试试这个：

$('#dropdwon2')[0].options = $('#dropdwon1')[0].options;

【讨论】：

不起作用，*.options 是只读的。 Firebug 日志：设置一个只有 getter 的属性；