Javascript 如何添加选项以从阵列中选择基于框的？

我被这个问题困住了。我想做的是使用jqueryjavascript动态地在选择框中创建选项值

例如，如果我有一个问题，比如你最喜欢的水果是什么？因此，用户应该能够从默认的选择框中选择答案，例如苹果、橘子、梨、香蕉。然后，他们可以单击一个“添加更多水果”，第二个选择框将显示相同的选择数组

基本上，我只能把这些信息拼凑到这里。但是，除了默认的选择水果选项外，我无法在运行时从数组中打印选项值

$(function() {
// set the array
var fruit = new Array("Apple", "Orange", "Pear", "Banana");

function addFruit() {
    $.each(fruit, function(key, value) {   
        $('#fruit')
        .append($('<option>', { value : key })
        .text(value)); 
    });
}

var i = $("li").size() + 1;
$("a#addmore").click(function() {
    $("#addmore_row").append('<li>' +
    '<select name="fruit[]" id="fruit">' +
    '<option value="">Select Fruit:</option>' +
    addFruit()                
    + '</select>' +
    '</li>');
    return false;
});

});

有谁能帮我解决这个问题吗？非常感谢。

addFruit在构造表示select的字符串时被调用。由于它仍在构造要追加的字符串，所以select实际上还不存在，但仍在调用addFruit。简而言之，在附加select之后，将addFruit从字符串连接中移出到

换言之，这：

$("#addmore_row").append('<li>' +
'<select name="fruit[]" id="fruit">' +
'<option value="">Select Fruit:</option>' +
'</select>' +
'</li>');
addFruit();
return false;

---

我尝试过，但我似乎附加到html中的默认选择框，而不是添加到新创建的选择框。我是否必须为新的选择框使用不同的名称，而不是为第一个选择默认框使用相同的名称？等等，我认为存在一个问题，对于第二个选择框，它可以工作，但是对于第三个和第四个选择框，它不会将值附加到选择框。我可以知道可以做什么吗？如果链接被多次单击，您需要为您添加的每个选择使用唯一的ID。