Hinzufügen von Optionen zu einer <Auswahl> mithilfe von jQuery?

Was ist der einfachste Weg, optionmit jQuery ein Dropdown-Menü hinzuzufügen ?

Ob das funktioniert?

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

Dies funktionierte NICHT in IE8 (noch in FF):

$("#selectList").append(new Option("option text", "value"));

Diese DID Arbeit:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Persönlich bevorzuge ich diese Syntax zum Anhängen von Optionen:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

Wenn Sie Optionen aus einer Sammlung von Elementen hinzufügen, können Sie Folgendes tun:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

Sie können Optionen mithilfe der folgenden Syntax hinzufügen. Weitere Informationen finden Sie unter Optionen für die Behandlung in jQuery .

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Wenn der Name oder Wert der Option dynamisch ist, müssen Sie sich keine Gedanken darüber machen, ob Sonderzeichen darin enthalten sind. In diesem Fall bevorzugen Sie möglicherweise einfache DOM-Methoden:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Option 1-

Sie können dies versuchen-

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

So was-

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>' );

So was-

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>

Das ist sehr einfach:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

oder

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Das funktioniert gut.

Wenn Sie mehr als ein Optionselement hinzufügen, würde ich empfehlen, das Anhängen einmal auszuführen, anstatt für jedes Element ein Anhängen durchzuführen.

aus welchem ​​Grund auch immer $("#myselect").append(new Option("text", "text")); funktioniert das nicht für mich in IE7 +

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

Um die Leistung zu verbessern, sollten Sie versuchen, das DOM nur einmal zu ändern, insbesondere 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);

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

Ich verwende gerne den Non-Query-Ansatz:

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

Sie können Optionen dynamisch zur Dropdown-Liste hinzufügen, wie im folgenden Beispiel gezeigt. Hier in diesem Beispiel habe ich Array-Daten genommen und diese Array-Werte an das Dropdown-Menü gebunden, wie im Ausgabe-Screenshot 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>

In keiner Antwort erwähnt, aber nützlich ist der Fall, in dem diese Option ebenfalls ausgewählt werden soll. Sie können Folgendes hinzufügen:

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

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));
});

Es gibt zwei Möglichkeiten. Sie können eine dieser beiden verwenden.

Zuerst:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Zweite:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

Wenn Sie die neue Option an einem bestimmten Index in die Auswahl einfügen möchten:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

Dadurch wird das "Neue Element" als drittes Element in die Auswahl eingefügt.

Sie können das Value-Attribut mit Text anhängen und festlegen:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Wir haben ein Problem festgestellt, wenn Sie die Option anhängen und jquery validate verwenden. Sie müssen auf ein Element in der Liste "Mehrere auswählen" klicken. Sie werden diesen Code hinzufügen, um Folgendes zu verarbeiten:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Wie wäre es damit

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);

Dies ist nur ein kurzer Punkt für die beste Leistung

Wenn Sie mit vielen Optionen zu tun haben, erstellen Sie immer eine große Zeichenfolge und fügen Sie sie dann zur Auswahl hinzu, um die beste Leistung zu erzielen

fg

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');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Wenn Sie Daten von einem Objekt erhalten, leiten Sie dieses Objekt einfach an die Funktion weiter ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Name und ID sind Namen von Objekteigenschaften ... damit Sie sie aufrufen können, wie Sie möchten ... Und natürlich, wenn Sie über Array verfügen ... möchten Sie eine benutzerdefinierte Funktion mit for-Schleife erstellen ... und diese Funktion dann einfach aufrufen Dokument bereit ... Prost

Basierend auf Antwort des dule für eine Sammlung von Gegenständen anhängen, ein Einzeilerfor...in auch Wunder wirken:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Den Optionen werden sowohl Objektwerte als auch Indizes zugewiesen. Diese Lösung funktioniert sogar in der alten jQuery (v1.4) !

Wenn Sie optgroup in select haben , haben Sie einen Fehler im DOM.

Ich denke am besten:

$("#select option:last").after($('<option value="1">my option</option>'));

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

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

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

$('#select_id').append($('<option>',{ value: v, text: t }));

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

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

Sie können dies in ES6 tun:

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

Wenn jemand hierher kommt und nach einer Möglichkeit sucht, Optionen mit Dateneigenschaften hinzuzufügen

Mit attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Mit Daten - Version hinzugefügt 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);