How to Add options to select box based from an array?
<p>I am stuck with this issue. What I want to do is to create the option values in a select box on the fly with the use of jquery javascript.</p>

<p>For example, if I have a question like what are your favourite fruits? So users should be able to select an answer from the default select box e.g. "Apple, Orange, Pear, Banana". Then they can click on a click "Add more fruits" and a second select box will appear with the same array of selection.</p>

<p>Basically with reference to <a href="http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery">the previous stack overflow question from another member</a>, I could only piece up the information till here. But I could not have the option values printed out from the array, aside from the default "Select Fruit" option, at runtime.</p>

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

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

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

});
</code></pre>

<p>Can anyone please help me out with this? Thank you very much.</p>
