如何添加选项以从数组中选择基于框的选项？

发布于 2024-11-19 17:22:29 字数 1020 浏览 0 评论 0原文

我被这个问题困扰了。我想要做的是使用 jquery javascript 在选择框中动态创建选项值。

例如，如果我有一个问题，比如你最喜欢的水果是什么？因此，用户应该能够从默认选择框中选择答案，例如“苹果、橙子、梨、香蕉”。然后，他们可以单击“添加更多水果”，然后将出现第二个选择框，其中包含相同的选择数组。

基本上参考之前另一个成员提出的堆栈溢出问题，我只能把信息拼凑到这里。但是，除了运行时默认的“选择水果”选项之外，我无法从数组中打印出选项值。

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

});

有人可以帮我解决这个问题吗？非常感谢。

原文

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.

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.

Basically with reference to the previous stack overflow question from another member, 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.

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

});

Can anyone please help me out with this? Thank you very much.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身狗的梦 2024-11-26 17:22:29

addFruit 在构建表示 select 的字符串时被调用。由于它仍在构造要附加的字符串，因此 select 实际上还不存在，但仍会调用 addFruit。简而言之，将 addFruit 从字符串连接中移出，放在附加 select 之后。

换句话说，这个：

$("#addmore_row").append('<li>' +
'<select name="fruit[]" id="fruit">' +
'<option value="">Select Fruit:</option>' +
'</select>' +
'</li>');
addFruit();
return false;

addFruit is being called while it's constructing the string representing the select. Since it's still constructing the string to append, the select doesn't actually exist yet, but addFruit is still being called. In short, move addFruit out of the string concatenation to after you've appended the select.

In other words, this:

$("#addmore_row").append('<li>' +
'<select name="fruit[]" id="fruit">' +
'<option value="">Select Fruit:</option>' +
'</select>' +
'</li>');
addFruit();
return false;

回复收藏 0 原文

~没有更多了~