用選項數組填充兩個選擇框？

Question

我有一個數組，我想用來填充兩個不同的選擇框，但我看到一些奇怪的行爲。填充第一個選擇可以正常工作，但是當向第二個選擇框添加相同列表時，第一個選擇將被清除，並且在第二個選擇框中選擇最後一個項目。

var optionList = [] 

optionList.push(new Option("waba", "waba")) 
optionList.push(new Option("shaba", "shaba")) 

$('#first_select').html(optionList); //works fine 
$('#second_select').html(optionList); //clears first select and last item is selected 

JS Fiddle Example

Answer 1

我認爲你需要克隆optionList

var optionList = [] 

optionList.push(new Option("waba", "waba")) 
optionList.push(new Option("shaba", "shaba")) 

$('#first').html(optionList); 
$('#second').html($(optionList).clone()); 

Answer 2

你要克隆它們使用jQuery.clone這樣的：

$('#first').html(optionList); // append the original options 
$('#second').html($(optionList).clone()); // clone them and append the cloned ones 

Answer 3

設置HTML內容都在一個聲明中：

$('#first, #second').html(optionList); 

的jsfiddle：https://jsfiddle.net/tcuow32f/1/