2つの選択肢を同時に変更する

Question

最初に、いくつか失敗して再試行したが、私の試行が失敗した理由がわからない。 ： 私の目標は、2つのページ内の一部の情報に応じて選択し、変更することでした（2を選択し、同じ情報で満たされることになっている）

失敗私は理解していないの試み2：

$('#select1').find('option').remove().end(); 
$('#select2').find('option').remove().end(); 

for (var i=0; i<data.length; i++){ 
    var option = document.createElement('option') 
    option.value = data[i].value; 
    option.text = data[i].text; 
    $('#select2').append(option); 
    $('#select1').append(option); 

この空の両方私の選択が、#select1だけが後で満たされます。私は2つの最後の行入れ替えた場合 - >

失敗試行1を私は理解していない：

$('#select1').append(option); 
    $('#select2').append(option); 

を今それが満たされているというのが私の#select2です。

そして、それは私は2つの最初の試みが失敗した理由$('#select1, #select2').append(option);

をしなければならなかった動作させるには？ Pythonジェネレータのようなvar option = document.createElement('option') でしたか？

EDIT：私の問題は＃に関するものではありません、私は質問でそれらを入力するのを忘れて、彼らは

Answer 1

この現象の背景には、document.createElementが実際のオブジェクトであるHTML要素を返すため、HTMLの他の要素に何度でも追加できます。

しかし、同じオブジェクトであるため、2番目のドロップダウンに追加するとクローンは作成されません。 .cloneNodeに電話してコピーを作成し、追加することができます。

$('#select1').append(option); 
$('#select2').append(option.cloneNode); 

Answer 2

あなたのセレクタは＃が含まれていない私のコードに存在していた：

$('#select1').append(option); 
$('#select2').append(option);