Jquery thêm yếu tố html để div sau vòng lặp for, hành vi kỳ lạ

Question

Dưới đây là đoạn code:

$('#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> luôn bổ sung trên vòng lặp for. Nếu tôi thay thế nó chỉ với công việc chọn ví dụ, nó được nối vào cuối, nơi nó nên được. Tại sao điều này xảy ra và tôi có thể sửa nó như thế nào?

Answer 1

Tôi tin rằng jQuery sẽ tạo ra các DOM như thế này:

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

Kể từ khi nó được tự động đóng <select> sau .append() đầu tiên. Những gì bạn đang làm sau đó sẽ thêm các tùy chọn vào <div id="#date"/> thay vì <select> đã được nối thêm. Tôi không nghĩ rằng việc đóng cửa cuối cùng </select> cũng sẽ thực sự làm bất cứ điều gì.

Nếu bạn thực sự muốn sử dụng thêm những điều sau đây JavaScript sẽ thêm các tùy chọn để nút đúng:

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

Giả HTML hiện:

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

Tuy nhiên điều này không phải chịu một chi phí từ phụ đang xảy ra hai lần. Cách tiếp cận nhanh hơn là để xây dựng tùy chọn đánh dấu như đã trả lời bằng cách ShankarSangoli

Answer 2

Nếu bạn muốn thực hiện theo cách của bạn - hãy tạo, ví dụ, biến chuỗi có mã html trong đó và thay thế nó.

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) 

hoặc xem đây What is the best way to add options to a select from an array with jQuery?

ps: các append đầu tiên cố gắng để tạo ra một cấu trúc DOM hợp lệ bên trong của tài liệu, đóng chọn thẻ tự động. đó là lý do tại sao người thứ hai sẽ không chèn các tùy chọn vào lựa chọn đã tạo.

một cách khác có thể, dựa vào liên kết ở trên, là

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

Answer 3

Nó không phải là cách đúng đắn để tạo html động. Bạn nên tạo đánh dấu hoàn chỉnh cùng một lúc bằng cách đặt nó vào một mảng và sau đó cung cấp nó cho jQuery. Hãy thử điều này

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 4

Tôi tưởng tượng HTML cơ bản bạn có trông giống như sau:

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

sau đó sau khi $('#date').append('<select id="date">... đầu tiên trong mã của bạn, bạn sẽ có điều này:

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

mà là 2 phần tử có cùng thuộc tính ID.

Thuộc tính ID giống như người cao tuổi, chỉ phải có một trong số họ (trong mỗi trang).

seccond $('#date').append... hoạt động không mong muốn và thứ ba, cũng bất ngờ, không hoạt động. Vì bạn không thể dự đoán được #date chúng đang đề cập đến.

Ngoài ra, như các câu trả lời khác, sẽ tốt hơn nếu bạn xây dựng nó để chỉ làm 1 nối thêm, vì gọi bộ chọn quá nhiều lần (đặc biệt là bên trong vòng lặp).

Answer 5

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

tất cả các tùy chọn nên quấn bên trong chọn