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

Question

我正在尝试将每个新的<option>追加到select字段，但是在第一次提交后，我似乎越来越多。

任何帮助表示赞赏。

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

和

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

这是一个小提琴： http : //jsfiddle.net/Buttery/5dQhj/3/

当前输出

Terry
Gus
Gus
Foo
Foo
Foo

Answer 1

当您单击按钮时，您会将新添加的内容附加到原始数据源，然后遍历原始数据源并重新添加每个数据源，创建重复项，请尝试以下操作：

$("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

删除您的for循环：

$("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

将全局变量移到函数中

$ ("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

试试这个： 小提琴演示

正如您一次次使用循环添加现有值一样，请避免使用循环。

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));



});