jquery - オプションが選択されているかどうかに関係なく、選択ボックスからオプションを追加する方法

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

実際、コードは問題なく動作しますが、オプションを最初の選択から 2 番目の選択に移動します。それらをコピーしたい場合は、追加する必要があります.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());
});

例。

更新: (コピーの代わりに)

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

例。

Answer 6