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

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

Answer 2

Ich mag es, nicht Jquery Ansatz zu verwenden:

mySelect.add(new Option('My option', 1));

Answer 3

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Answer 4

Sie können Optionen dynamisch in das Dropdown-Menü einfügen, wie im folgenden Beispiel gezeigt. In diesem Beispiel habe ich Array-Daten genommen und diese Array-Werte mit der Dropdown-Liste verbunden, wie im Screenshot der Ausgabe gezeigt

Ausgabe:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
         myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Answer 5

Dies wird in keiner Antwort erwähnt, ist aber nützlich, wenn Sie möchten, dass diese Option auch ausgewählt wird, können Sie sie hinzufügen:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);