jQuery-尝试附加每个新选项以进行选择

Question

I'm trying to append every new <option> to the select field, but I seem to be getting multiples after the first submission.

Any help is appreciated.

<input id="name" placeholder="name">
<input id="phone" placeholder="phone">
<button id="submit">Submit</button>

and

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    var len = users.length;

    for (var i = 0; i < len; i++) {
        $("<option value=" + users[i].phone+ ">" + users[i].name + "</option>").appendTo(select);
    }
});

Heres a fiddle : http://jsfiddle.net/Buttery/5dQhj/3/

Currently outputs

Terry
Gus
Gus
Foo
Foo
Foo

Answer 1

When you click your button, you're appending the new addition to the original data source, then looping over the original data source and re-adding each one, creating duplicates, try this:

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    $("<option value=" + userData.phone + ">" + userData.name + "</option>").appendTo(select);
});

Answer 2

Remove your for loop:

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    $("<option value=" + userData.phone+ ">" + userData.name + "</option>").appendTo(select);
});

http://jsfiddle.net/9u7LS/

Answer 3

Move the global variables into the function

$ ("button").on("click", function(){
var users = [];
var userData = {};
var select = $("#users");
userData.name = $("#name").val();
userData.phone = $("#phone").val();
users.push(userData);

var len = users.length;

for (var i = 0; i < len; i++) {
    $("<option value=" + users[i].phone + ">" + users[i].name +  "</option>").appendTo(select);
}

});

Answer 4

Try with this: Fiddle Demo

As you were again and again adding the existing values using the loop so just avoid using the loop.

var users = [];
var userData = {};
var select = $("#users");

$("button").on("click", function(){

userData.name = $("#name").val();
userData.phone = $("#phone").val();
users.push(userData);

    $("<option value=" + users[0].phone+ ">" + users[0].name +   
    "</option>").appendTo(select);
});

Answer 5

var users = [];
var userData = {};
var select = $("#users");

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    select.append($("option>/option>").attr("value",userData.phone).text(userData.name));



});