配列から選択ボックスにオプションを追加する方法は？

Question

私はこの問題を抱えています。私がしたいのは、jquery javascriptを使ってオンザフライで選択ボックスにオプション値を作成することです。

たとえば、あなたの好きな果物は何ですか？したがって、ユーザーはデフォルトの選択ボックスから回答を選択できる必要があります。 "アップル、オレンジ、ナシ、バナナ"。次に、 "Add fruits more"をクリックすると、同じ選択配列で2番目の選択ボックスが表示されます。

基本的にthe previous stack overflow question from another memberを参照すると、私はここまで情報をまとめることができました。しかし、デフォルトの "Select Fruit"オプションとは別に、実行時に配列からオプション値を出力することはできませんでした。

$(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; 
}); 

}); 

誰でもこのお手伝いをしていただけますか？どうもありがとうございました。

Answer 1

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;