it-swarm.com.de

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

Was ist der einfachste Weg, um mit jQuery eine option zu einem Dropdown hinzuzufügen? 

Ob das funktioniert?

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

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);
177
Josh

Ich persönlich bevorzuge diese Syntax für das Anhängen von Optionen:

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

Wenn Sie Optionen aus einer Sammlung von Elementen hinzufügen, haben Sie folgende Möglichkeiten:

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

Sie können die Option mithilfe der folgenden Syntax hinzufügen. Weitere Informationen finden Sie unter Option für den Methodenhandgriff 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));

107
Dipu

Wenn der Name oder der Wert der Option dynamisch ist, müssen Sie sich keine Sorgen darüber machen, dass Sonderzeichen in der Liste angezeigt werden. Vielleicht bevorzugen Sie einfache DOM-Methoden:

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

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 probieren Sie das-

$('#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>

33
Abrar Jahin

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

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

18
Ashish

Das funktioniert gut 

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

18
Russ Cam

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);
14
John Magnolia

Ich verwende gerne einen Ansatz ohne Jquery:

mySelect.add(new Option('My option', 1));
12
caiohamamura
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
11
szpapas

Sie können Optionen dynamisch zum Dropdown hinzufügen, wie im folgenden Beispiel gezeigt. Hier in diesem Beispiel habe ich Array-Daten genommen und diesen Array-Wert an das Dropdown-Menü gebunden, wie im Screenshot der Ausgabe gezeigt

Ausgabe:

 enter image description here

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>

11
GSB

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);
9
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));
});
8
Salim

Dies sind sehr einfache Dinge ... Sie können dies auf diese Weise tun

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

oder

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

Es gibt zwei Möglichkeiten. Sie können beide 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));
});
4
Dulith De Costa

Sie können das Value-Attribut mit Text anfügen und festlegen:

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

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

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

Dadurch wird der "Neue Artikel" als dritter Artikel in der Auswahl eingefügt.

3
ATOzTOA

Wir haben ein Problem gefunden, wenn Sie die Option anhängen und Jquery validate verwenden.

$("#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

 https://i.stack.imgur.com/HOjIY.png

3
Peang Peang

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);
2
Mcfaith

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

wenn Sie mit vielen Optionen zu tun haben, erstellen Sie eine große Zeichenfolge und fügen Sie sie dann zur Auswahl hinzu, um optimale 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');
2
Hatim
$('#select_id').append($('<option>',{ value: v, text: t }));
1
Cris

So habe ich es gemacht, mit einem Button, um jedes select-Tag hinzuzufügen.

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

Sie können unter dem folgenden Code versuchen, an die Option anzuhängen 

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

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

Sie können dies in ES6 tun:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });
1
idiglove
$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Wenn Sie Daten von einem Objekt abrufen, leiten Sie das Objekt einfach weiter, damit es funktioniert ...

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

Name und Id sind Namen von Objekteigenschaften ... Sie können sie also beliebig aufrufen ... Und natürlich, wenn Sie Array haben ... möchten Sie eine benutzerdefinierte Funktion mit for-Schleife erstellen ... und dann diese Funktion in aufrufen Dokument fertig ... Prost

1
mr. Panzerman

wenn Sie optgroup inside select haben, haben Sie einen Fehler im DOM.

Ich finde einen besten Weg:

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

Basierend auf der Antwort von dule zum Anhängen einer Sammlung von Elementen wird ein one-liner for...in auch Wunder bewirken:

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 auch in der alten jQuery (v1.4) !

0
CPHPython

Wenn hier jemand nach einer Möglichkeit sucht, Optionen mit Dateneigenschaften hinzuzufügen

attr verwenden

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

Verwendung von data - Version hinzugefügt 1.2.3

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