web-dev-qa-db-ja.com

jQuery clone <select>要素

JQueryを使用して、HTMLの<select>入力のクローンを作成します。
どうすればいいのかわからないので、ここで聞いてみようと思いました。

特にドキュメントに書き戻すための最良の方法にも関心があります。

私の選択要素は次のようになります：

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

ありがとう。

jqueryhtmlformsselectclone
17
diggersworld

参照： http://api.jquery.com/clone/

$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');

appendTo（...）は、複製された要素を挿入する唯一の方法です。他のメソッドはここにあります： http://api.jquery.com/category/manipulation/

30
Plaudit Design

これはどう？

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

//目標

<select id="options2">
</select>

$('#options').find('option').clone().appendTo('#options2');

ありがとう。

12
user754952

受け入れられた回答の唯一の問題は、選択にoptgroupが含まれている場合、それらがコピーされないことです。その場合、私が見つけた最も簡単な方法は、これを実行することでした：

$('#options2').html($('#options').html());
9
jesal

選択変更でオプションをtrueに選択してattrオプションを指定できます。その後、クローンの使用は問題ありません。

$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});
$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});
0
user9054011

jQueryには clone メソッドが組み込まれています。複製された要素を元に戻す方法については、多くの options があります。適切な選択は、アプリケーションによって異なります。

0
CuriousCurmudgeon