Hinzufügen von Optionen zu einem <select> mit jQuery?

Question

Wie fügt man am einfachsten eine option zu einem Dropdown mit jQuery?

Wird das funktionieren?

$("#mySelect").append('<option value=1>My option</option>');

Answer 1

Option 1-

Versuchen Sie Folgendes.

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Etwa so.

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Option 2-

Oder versuchen Sie dies.

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Etwa so.

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Answer 2

Das funktioniert gut.

Wenn Sie mehr als ein Optionselement hinzufügen, empfehle ich, die Anfügung einmal durchzuführen, anstatt für jedes Element eine Anfügung vorzunehmen.

Answer 3

Warum nicht einfach?

$('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

Answer 4

Aus welchen Gründen auch immer tun $("#myselect").append(new Option("text", "text")); funktioniert bei mir im IE7+ nicht

Ich musste die $("#myselect").html("<option value='text'>text</option>");

Answer 5

Um die Leistung zu verbessern, sollten Sie versuchen, das DOM nur einmal zu ändern, vor allem, wenn Sie viele Optionen hinzufügen.

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);