web-dev-qa-db-ja.com

Javascript：1つの選択要素から別の選択要素にすべてのオプションをコピーする方法は？

あるoptions要素のすべてのselectを別の要素にコピーするにはどうすればよいですか？最も簡単な方法を教えてください、私はループにアレルギーがあります。

私を助けてください。前もって感謝します！

javascripthtmlselectoption
19
dpp

html：

<select id="selector_a">
    <option>op 1</option>
    <option>op 2</option>
</select>

<select id="selector_b">
    <option>op 3</option>
    <option>op 4</option>
</select>

javascript：

var first = document.getElementById('selector_a');
var options = first.innerHTML;

var second = document.getElementById('selector_b');
var options = second.innerHTML + options;

second.innerHTML = options;
23
helle

ループせずに最も簡単な方法の1つは、jquery（select1 =選択1のID、select2 =選択のID 2）：

$('#select1 option').clone().appendTo('#select2');

jqueryなし：

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select2.innerHTML = select2.innerHTML+select1.innerHTML;
29
manji

IE7のように動作するIE11の「互換モード」ページをいくつか維持しています。上記の純粋なJavaScriptソリューションはnotで機能しました。最初の開始オプションタグは、不可解なことに、直接innerHTML割り当てを使用して削除されます。

私にとってうまくいったのは、selectのオプションコレクションの各オプションを新しいselectに明示的に追加することでした。この例では、AJAX呼び出しをサポートすることでしたので、最初にリストをクリアしましたが、これも追加できると確信しています。

var fromSelect = document.getElementById('a');
var toSelect = document.getElementById('b');
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
    var option = fromSelect.options[i];
    toSelect.appendChild(option);
}

このページがGoogle検索のリストの一番上にあったので、これが互換モードで立ち往生している他の人を助けることを願っています。

4
Lathejockey81

jQuery foreachを使用しますか？

$("#the-id option").each(function() {
    var val = $(this).val();
    var txt = $(this).html();
    $("the-other-id").append(
        $('<option></option>').val(val).html(txt);
    );
});
2
Mohamed Nuur

jquery： を使用して簡単に行うことができます

<select id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

$(document).ready(function(){
    $("#sel2").html($("#sel1").html());
});
2
melaos

その古いスレッドですが、以下が誰かを助けることを願っています。ループはまったくありません。

function copyFromMultiselect(srcId,targetId, allFlag){
    if(allFlag){
        $("#"+targetId).append($("#"+srcId).html());
        $("#"+srcId).empty();
    }else{
        $("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
    }
  }
0
Fawad Shah
$('#cloneBtn').click(function() {
    var $options = $("#myselect > option").clone();
    $('#second').empty();
    $('#second').append($options);
    $('#second').val($('#myselect').val());
});

 This is used to copy the value and the innerHTML. Its better to copy the key,
 value and the OPTIONS.i.e. the selected value and the options.
0
Sumeet Patil