JQuery kullanarak bir <select> seçeneğine ekleme?

optionJQuery kullanarak açılır menüye bir eklemenin en kolay yolu nedir ?

Bu işe yarayacak mı?

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

Bu IE8'de işe yaramadı (henüz FF'de işe yaramadı):

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

Bu iş:

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

Şahsen ben bu sözdizimini ekleme seçenekleri için tercih ediyorum:

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

Bir öğe koleksiyonundan seçenekler ekliyorsanız, aşağıdakileri yapabilirsiniz:

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

Aşağıdaki sözdizimini kullanarak seçenek ekleyebilirsiniz. Ayrıca , daha fazla bilgi için jQuery'de yol işleme seçeneğini ziyaret edebilirsiniz .

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

Seçenek adı veya değeri dinamikse, içindeki özel karakterlerden kaçmak konusunda endişelenmek istemezsiniz; burada basit DOM yöntemlerini tercih edebilirsiniz:

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

Seçenek 1-

Bunu deneyebilirsiniz-

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

Bunun gibi-

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>

Seçenek 2-

Veya şunu deneyin-

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

Bunun gibi-

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>

Bu çok basit:

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

veya

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

İyi çalışıyor.

Birden fazla seçenek öğesi ekliyorsanız, her öğeye bir ekleme işlemi uygulamak yerine, eki bir kez gerçekleştirmenizi öneririm.

herhangi bir nedenle $("#myselect").append(new Option("text", "text"));IE7 + 'da benim için çalışmıyor

Kullanmak zorundaydım $("#myselect").html("<option value='text'>text</option>");

Performansa yardımcı olmak için, DOM'u yalnızca bir kez değiştirmeye çalışmalısınız, daha fazla seçenek ekliyorsanız daha da fazla.

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

Jquery olmayan bir yaklaşım kullanmayı seviyorum:

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

Aşağıdaki örnekte gösterildiği gibi açılır listeye seçenekleri dinamik olarak ekleyebilirsiniz. Burada bu örnekte dizi verisi aldım ve bu dizi değerini çıktı ekran görüntüsünde gösterildiği gibi açılır listeye bağladım

Çıktı:

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>

Herhangi bir cevapta belirtilmemiş, ancak bu seçeneğin de seçilmesini istediğiniz durum yararlıdır, şunları ekleyebilirsiniz:

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

İki yol var. Bu ikisinden birini kullanabilirsiniz.

İlk:

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

İkinci:

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

Yeni seçeneği, seçimdeki belirli bir dizine eklemek istiyorsanız:

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

Bu, seçimdeki 3. öğe olarak "Yeni Öğe" yi ekleyecektir.

Metin ile Değer özniteliğini ekleyebilir ve ayarlayabilirsiniz:

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

Seçeneği eklediğinizde ve jquery validate kullandığınızda bir sorun bulduk. Birden fazla liste seçmek için bir öğeyi tıklamanız gerekir. Bu kodu işlemek için ekleyeceksiniz:

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

Buna ne dersin

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

Bu sadece en iyi performans için hızlı bir noktadır

her zaman birçok seçenekle uğraşırken, büyük bir dize oluşturun ve ardından en iyi performans için 'seç'e ekleyin

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

Daha hızlı

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

Bir nesneden veri alırsanız, o nesneyi işlevine iletmeniz yeterlidir ...

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

Ad ve Kimlik, nesne özelliklerinin adlarıdır ... bu yüzden istediğiniz her şeyi çağırabilirsiniz ... Ve Array'ınız varsa tabii ki ... döngü için özel işlev oluşturmak istiyorsunuz ... ve sonra bu işlevi belge hazır ... Şerefe

Dule'un bir öğe koleksiyonu ekleme cevabına dayanarak , bir astarfor...in da harikalar yaratacak:

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>

Seçeneklere hem nesne değerleri hem de dizinler atanır. Bu çözüm eski jQuery'de (v1.4) bile çalışır !

u seçin içinde optgroup varsa , u DOM hata var.

Bence en iyi yol:

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

U seçeneği eklemek için aşağıdaki kodu deneyebilirsiniz

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

Her seçim etiketini eklemek için bir düğme ile bunu yaptım.

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

Bunu ES6'da yapabilirsiniz:

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

Birisi buraya veri özelliklerine sahip seçenekler eklemenin bir yolunu arıyorsa

Attr kullanma

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

Verileri kullanma - sürüm eklendi 1.2.3

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