Question

以下是代码：

$('#date').append(
    '<select id="date">'+
    '<option value="0">- - SELECT - -</option>');
    for(var i in data){
    $('#date').append(
    '<option value="">'+data[i]['date_time']+'</option>');
    });
$('#date').append('</select>');

</select>总是在上面添加for循环。如果我用例如工作选择替换它，它会附加到最后，它应该在那里。为什么会发生这种情况？我该如何解决？

Answer 1

我相信jQuery会像这样生成DOM：

<div id="date">
    <select id="date">
        <option value="0">- - SELECT - -</option>
    </select>
    <option value="">foo</option>
    <option value="">bar</option>
    etc...
</div>

因为它会在第一个<select>之后自动关闭.append()。之后您正在做的是将选项附加到<div id="#date"/>而不是附加的<select>。我不认为最后的结束</select>实际上也会做任何事情。

如果您真的想使用append，则以下JavaScript会将选项添加到正确的节点：

// dummy data object for example
var data = new Array(new Array(), new Array());
data[0].date_time = 2011;
data[1].date_time = 2012;

var options = new Array();
$.each(data, function(index, option) {
    options.push('<option value="' + index + '">'+ option.date_time +'</option>');
});

$('<select id="date"/>').append(options.join('')).appendTo('#date');

假设现有的HTML：

<div id="date"></div>

然而，由于附加发生两次，这确实会产生开销。更快的方法是建立选项标记，正如ShankarSangoli已经回答的那样

Answer 2

这不是动态创建html的正确方法。您应该通过将完整标记放入数组中然后将其提供给jQuery来创建完整标记。试试这个

var html = [];
html.push('<select id="date">');
html.push('<option value="0">- - SELECT - -</option>');
for(var i in data){
   html.push('<option value="">'+data[i]['date_time']+'</option>');
}
html.push('</select>');
//This selector should be some container like dateContainer
//because you have already give date as id to the above select element
$('#dateContainer').html(html.join(''));

Answer 3

$('#date').append($("<select/>", { name: "name"+i})
 .find('select')   
 .append($("<option/>", { value: "abc"+i}).text('cell'))   
 .append($("<option/>", { value: "abc"+i}).text('home'))   
 .append($("<option/>", { value: "abc"+i}).text('work'));

所有选项都应该包含在select

中

Answer 4

如果你想以自己的方式去做 - 例如，在其中创建带有html代码的字符串变量，而不是追加它。

data = [1, 2, 3];
var html = '<select id="date">'+
    '<option value="0">- - SELECT - -</option>';
 for(var i in data){
    html += '<option value="">'+data[i]+'</option>';
}
$('#date').append(html)

或者看这里 What is the best way to add options to a select from an array with jQuery?

ps：第一个附加尝试在文档内部创建有效的DOM结构，自动关闭选择标记。这就是为什么第二个不会在创建的选择中插入选项的原因。

另一种可能的方式，基于上面的链接，是

var sel = $('<select id="date">');
$.each(data, function(key, value) {   
       sel.append($('<option>').text(key['date_time'])); 
});
$('#date').append(sel);

Answer 5

我想你的基本HTML看起来像这样：

<div id="date"></div>

然后在代码中的第一个$('#date').append('<select id="date">...之后，您将拥有：

<div id="date"><select id="date">...</div>

这是具有相同ID属性的2个元素。

ID属性就像高地人一样，必须只有其中一个（在每个页面中）。

第二个$('#date').append...意外地工作，而第三个也出乎意料地工作。因为您无法预测他们所指的#date。

另外，正如其他答案所说，如果你构建它只做一次追加会更好，因为多次调用选择器（特别是在循环内）它会影响性能。

Jquery在循环之后将html元素附加到div，奇怪的行为

5 个答案: