Question

我想知道如何将选项框中的选项附加到另一个选择框中。但问题是，如果选择了选项，我想要附加选择框中的所有学生而不关心，如果学生在选择框中，那么他们应该被添加到另一个选择框中。

下面是我所拥有的jquery代码，它假设要执行附加但不会发生：

var selectedStudents = jQuery("select#studentadd").find("option");
selectedStudents.appendTo($("select#studentexist"));

以下是选择框#studentadd：

<select multiple="multiple" name="addtextarea" id="studentadd" size="10">
    <option value='1'>u08743 - Joe Cann</option>
    <option value='4'>u03043 - Jill Sanderson</option>
    <option value='7'>u08343 - Craig Moon</option>
</select>

以下是学生应加入的选择框：

<select id="studentexist" name="existtextarea"></select>

Answer 1

试试这段代码......

    var str="";
        $('#studentadd').find('option').each(function(){
        str+="<option>"+$(this).html()+"</option>";
        });
$('#studentadd').html("");
        $('#studentexist').html(str);

Answer 2

应该有用，也许你忘了这个

$(document).ready(function(){
  var selectedStudents = jQuery("select#studentadd").find("option");
            selectedStudents.appendTo($("select#studentexist"));
});

Answer 3

您可以使用jquery $.html()来执行此操作

var opt = $("#studentadd").html();
$("#studentexist").html(opt);

更新

使用$.detach()移动DOM

var opt = $("#studentadd").detach();
$("#studentexist").html(opt);

Answer 4

实际上，您的代码完美无瑕，但它将选项从第一个选择移动到第二个选择。如果您想复制它们，则需要添加.clone()（here for a fiddle）：

var selectedStudents = jQuery("select#studentadd").find("option");
selectedStudents.clone().appendTo($("select#studentexist"));

Answer 5

你可以试试这个

$("select#studentadd option").each(function(){
    $("select#studentexist").append($(this).clone());
});

Example

更新：（而不是复制）

$("select#studentadd option").each(function(){
    $("select#studentexist").append($(this));
});

Example

Answer 6

使用.clone()：http://jsbin.com/ucozis/4/edit

$(function(){

    $('#studentexist').html($('#studentadd option').clone());
    $('#studentadd').html('');

});

在.append()或.clone()空白后选择。

正如您所提到的那样，这是对此的更新答案：

$(function(){
  $('button').click(function(){
    $('#studentexist').html($('#studentadd option').clone());
    $('#studentadd').html('');
  });
});

这里是替换单击按钮时所有内容的小提琴 http://jsbin.com/ucozis/5/edit

无论是否选择了选项，如何从选择框中追加选项

6 个答案: