Dynamische HTML5 Datalist

Also ich habe ein bisschen ein Problem, immer mein HTML5 Datalist zum Auffüllen dynamisch aus einer javascripi array wird gefüllt von Werten des Schlüssels um ein Objekt, das Wesen bevölkert, die über Zeilen in einer MySQL-Datenbank. Puh!

MySQL-Datenbank => Table => Zeilen => JSON => Javascript-Objekte => "Vorname" & "lastname" key => Array aus dem ersten Namen => Datalist-Optionen.

Habe ich erfolgreich erstellt, das Array von Namen:

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array

Und richten Sie eine Schleife .fügen Sie diese an die Datenliste:

for (var i = 0; i < nameArray.length; i++) {
    alert(i + " - " + nameArray[i]); //Works Fine, "0 - Rick Bross", "1 - Madison Smith", etc.
    $('#potentials').append("<option value='" + nameArray[i] + ">"); //Not working.
}

Hier ist mein HTML:

<input tabindex='1' list="potentials" type="text" placeholder="First &amp; Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>

Weiß jemand, warum dies nicht Auffüllen?

+1 für eine sscce-konforme Frage 🙂

InformationsquelleAutor Rick Bross | 2013-04-15

  1. 2

    Ich weiß, diese Antwort ist spät, aber es könnte jemand helfen.

    var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"];

    Hinzufügen-Optionen, um die datalist.

    - "attr" hilft, wenn Sie eine ich.d zur Identifizierung der einzelnen option.

    - "text" wird der Inhalt angezeigt werden.

    $.each(nameArray, function(i, item) {
    $("#potentials").append($("<option>").attr('value', i).text(item));
    });

    InformationsquelleAutor Records

  2. 8

    Fehlt ein Apostroph versuchen:

    $('#potentials').append("<option value='" + nameArray[i] + "'>");
    Das hat sich darum gekümmert, danke!

    InformationsquelleAutor kuncajs

  3. -5

    Versuchen $("datalist#Potentiale).append...

    Wenn $('#potentials') nicht funktioniert, einschließlich der element-Typ in der Auswahl als $('datalist#potentials') wird nicht helfen.

    InformationsquelleAutor Andrew Traub

Schreibe einen Kommentar