Append Auswahl Box Optionen dynamisch mit Attributen

Question

Ich muss zusätzliche Daten an meine Auswahlbox Optionen anhängen. Hier ist mein Code.

Html:

<select id="questionNumber" class="form-control"> 
    <option>Select Number</option> 
</select> 

JQuery:

$.each(result.data, function (key, value) { 
    $("#questionNumber").append($('<option>', { 
     value: value.id, 
     text: value.number 
    })); 
}); 

i kann also Wert und Text hinzufügen, aber ich möchte Attribute auch auf diese beigefügten Option anhängen wie

data-marks = value.mark 

So wäre mein erwartetes Ergebnis wie

<select id="questionNumber" class="form-control"> 
    <option>Select Number</option> 
    <option value="170" data-mark="2">1</option> 
    <option value="171" data-mark="3">2</option> 
</select> 

Was soll ich dafür tun? Danke.

Answer 1

Hier gehen Sie mit der Lösung https://jsfiddle.net/u5vek2jc/

var result = {data:[ 
 
\t { 
 
    \t id:"5", 
 
    number: "5" 
 
    }, 
 
    { 
 
    \t id: "89", 
 
    number: "89" 
 
    } 
 
]} 
 
$.each(result.data, function (key, value) { 
 
    $("#questionNumber").append($('<option>', { 
 
     value: value.id, 
 
     text: value.number, 
 
     'data-mark': value.id 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="questionNumber" class="form-control"> 
 
    <option>Select Number</option> 
 
</select>

Answer 2

Iterierte über Ihre Daten Optionen zu erstellen, und fügen Sie dann zu Ihrem select-Element

$html=''; 
$.each(result.data, function (key, value) { 
    html +='<option value="' + value.id + '" data-mark="'+value.mark+'">' + value.number + '</option>'; 
}); 
$("#questionNumber").append(html); 

Answer 3

Sie hinzufügen das Attribut data für den von Ihnen generierten HTML-Code. Beachten Sie auch, dass Sie die Logik so anpassen können, dass das DOM nur einmal statt innerhalb jeder Iteration aktualisiert wird. Versuchen Sie folgendes:

var html = result.data.map(function(o) { 
    return `<option value="${o.id}" data-mark="${o.mark}">${o.number}</option>`; 
}).join(''); 
$("#questionNumber").append(html);