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

Dies ist nur ein kurzer Hinweis auf die beste Leistung

Wenn Sie viele Optionen haben, erstellen Sie immer eine große Zeichenkette und fügen Sie sie dann der "Auswahl" hinzu, um die beste Leistung zu erzielen.

z.B.

var $mySelect = $('#mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Noch schneller

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

Answer 2

So habe ich es gemacht, mit einer Schaltfläche zum Hinzufügen jedes Select-Tags.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Answer 3

Sie können dies in ES6 tun:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Answer 4

Versuchen Sie

mySelect.innerHTML+= '<option value=1>My option</option>';

btn.onclick= _=> mySelect.innerHTML+= `<option selected>${+new Date}</option>`

<button id="btn">Add option</button>

<select id="mySelect"></select>

Answer 5

Sie können den folgenden Code ausprobieren, um die Option anzuhängen

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>