Jquery anexar elemento html a DIV después de bucle, comportamiento extraño

Question

Aquí está el código:

$('#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> siempre se añade encima de bucle. Si lo reemplazo con solo seleccionar, por ejemplo, se agrega al final, donde debería estar. ¿Por qué está sucediendo esto y cómo puedo solucionarlo?

Answer 1

creo que jQuery generará el DOM como esto:

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

Desde que se cierre automáticamente el <select> después de la primera .append(). Lo que está haciendo posteriormente se anexando las opciones <div id="#date"/> a la vez de la <select> que se adjunta. No creo que el cierre final </select> haga realmente nada tampoco.

Si realmente desea utilizar anexar el siguiente JavaScript añadirá las opciones para el nodo correcto:

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

Suponiendo que el HTML existente:

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

Sin embargo, esto incurre en un gasto general ya anexando está ocurriendo dos veces. El enfoque más rápido es la construcción de las opciones marcado como ya contestadas por ShankarSangoli

Answer 2

Si desea hacerlo en su camino - crear, por ejemplo, con la variable de cadena de código html en ella y que añadirlo.

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) 

o buscar aquí What is the best way to add options to a select from an array with jQuery?

ps: la primera append trata de crear una estructura DOM válida dentro del documento, cerrando seleccione la etiqueta automáticamente. es por eso que el segundo no insertará opciones en la selección creada.

otra manera posible, con base en el enlace anterior, es

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

Answer 3

No es el camino correcto para crear HTML de forma dinámica. Debe crear el marcado completo de una sola vez al ponerlo en una matriz y luego proporcionarla a jQuery. Prueba este

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

Me imagino que el HTML base que tiene se ve algo como esto:

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

continuación, después de la primera $('#date').append('<select id="date">... en su código, que tendrá la siguiente:

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

cuales son 2 elementos con el mismo atributo de ID.

El atributo ID es como los de las tierras altas, no sólo debe ser uno de ellos (en cada página).

Los seccond $('#date').append... obras de forma inesperada, y el tercero uno, también de forma inesperada, no funciona. Porque no puede predecir a qué #date se están refiriendo.

Además, como dicen las otras respuestas, será mejor si lo compila para hacer solo 1 apéndice, porque llamar a los selectores tantas veces (especialmente dentro del ciclo) es un golpe de rendimiento.

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

todas las opciones debe envolver el interior seleccionar