jQuery-尝试附加每个要选择的新选项

jQuery - Trying to append each new option to select

本文关键字：新选项 选项 选择 jQuery-      更新时间：2023-09-26

我试图将每个新的<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

当您单击按钮时，您将新添加的数据附加到原始数据源，然后在原始数据源上循环并重新添加每个数据源，创建重复数据，请尝试以下操作：

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);
    $("<option value=" + userData.phone + ">" + userData.name + "</option>").appendTo(select);
});

删除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/

将全局变量移动到函数中

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

})；

试试这个：Fiddle Demo

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

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

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

});
相关文章：