JQuery ile bir JavaScript nesnesi olarak bir seçime seçenek eklemenin en iyi yolu nedir?

<select>JQuery kullanarak bir JavaScript nesnesine bir seçenek eklemek için en iyi yöntem nedir ?

Yapmak için bir eklentiye ihtiyacım olmayan bir şey arıyorum, ama aynı zamanda dışarıdaki eklentilerle de ilgilenirim.

Ben de öyle yaptım:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Temiz / basit bir çözüm:

Bu matdumsa'nın temizlenmiş ve basitleştirilmiş bir versiyonudur :

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

Matdumsa'nın yaptığı değişiklikler: (1) append () içindeki seçenek için close etiketini kaldırdı ve (2) özellikleri / nitelikleri append () parametresinin ikinci parametresi olarak bir haritaya taşıdı.

Bir jQuery tarzında diğer cevaplarla aynı:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Bu şekilde "DOM'a" yalnızca bir kez dokunursunuz.

JQuery internals bilmiyorum (belki html () bazı ayrıştırma yapar) çünkü en son satır $ ('# mySelect'). yöntem)

Bu biraz daha hızlı ve daha temiz.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilya JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

Eski IE sürümleri destekleyen yoksa kullanılarak Optionyapıcısı gitmek için yol, açıkça okunabilir ve verimli çözüm :

$(new Option('myText', 'val')).appendTo('#mySelect');

İşlevsel olarak eşdeğerdir, ancak aşağıdakilerden daha temizdir:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

Bu daha hoş görünür, okunabilirlik sağlar, ancak diğer yöntemlerden daha yavaştır.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Hız istiyorsanız, dize birleştirme değil dizi kullanarak ve yalnızca bir ekleme çağrısı kullanarak en hızlı (test edilen!) Yol budur.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

Daha yaşlı @ joshperry'nin cevabının ayrıntılandırılması :

Öyle görünüyor ki sade .append de beklendiği gibi çalışıyor,

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

veya daha kısa,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

Tüm bu cevaplar gereksiz yere karmaşık görünüyor. Tum ihtiyacin olan sey:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Bu tamamen çapraz tarayıcı uyumludur.

Unutulmayın ... Android 2.2 (Cyanogen 7.0.1) telefon (T-Mobile G2) üzerinde PhoneGap 1.0.0 ile jQuery Mobile 1.0b2 kullanıyorum ve .append () yöntemi hiç çalışamadı. Aşağıdaki gibi .html () kullanmak zorunda kaldı:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

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

 $('#choose_schedule').get(0).innerHTML = output.join('');

Birkaç test yaptım ve bence bu işi en hızlı şekilde yapıyor. : P

Kullanarak bir yaklaşım var Microsoft Templating yaklaşımını jQuery çekirdeğine dahil edilmek üzere teklif edilen bir var. Şablonlamayı kullanmada daha fazla güç vardır, bu nedenle en basit senaryo için en iyi seçenek olmayabilir. Daha fazla ayrıntı için Scott Gu'nun özellikleri özetleyen yayınına bakın.

Öncelikle github'dan temin edilebilen şablon js dosyasını ekleyin .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Sonraki şablon oluşturma

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Ardından verilerinizle .render () yöntemini çağırın

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Ben ettik blogged daha ayrıntılı olarak bu yaklaşımı.

Ajax aracılığıyla bir açılır menü yükleyerek böyle bir şey yaptım . Yukarıdaki yanıt da kabul edilebilir, ancak daha iyi performans için olabildiğince az DOM değişikliği yapmak her zaman iyidir.

Bu nedenle, her öğeyi bir döngü içine eklemek yerine, öğeleri bir döngü içinde toplamak ve tamamlandıktan sonra eklemek daha iyidir.

$(data).each(function(){
    ... Collect items
})

Ekleyin,

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

hatta daha iyisi

$('#select_id').html(items);

Basit yol:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Diğer cevapların çoğu each,selectValues . Bu, her öğe için ekin çağrılmasını ve her biri ayrı ayrı eklendiğinde bir yeniden akışın tetiklenmesini gerektirir.

Bu cevabı daha modern bir işlevsel yönteme (modern JS kullanarak) güncellemek, harita ve bir öğe oluşturucu kullanılarak oluşturulan appendbir dizi öğeyle yalnızca bir kez optionçağrılacak şekilde oluşturulabilir .Option

OptionDOM öğesinin kullanılması , optionöğenin oluşturma işleminden sonra güncellenmesi gerekmediği ve jQuery'nin ayrıştırma mantığının çalışması gerekmediği için işlev çağrısı ek yükünü azaltmalıdır .

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

Bir seçenek nesnesini yenileyecek bir fabrika yardımcı programı işlevi yaparsanız bu daha da basitleştirilebilir:

const newoption = (...args) => new Option(...args)

Daha sonra bu doğrudan aşağıdakilere sağlanabilir map:

$('mySelect').append($.map(selectValues, newoption))

Önceki Formülasyon

Çünkü appendaynı zamanda bağımsız değişken bir sayı olarak değerleri geçen verir, biz listesini PreCreate edebilir optionelemanları harita ve kullanarak tek çağrıda argümanlar olarak ekleyin apply.

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

JQuery'nin sonraki sürümlerinde, appendbir dizi bağımsız değişkenini de kabul ediyor ve bu biraz basitleştirilebilir:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

JQuery 1.4.1 ile iyi çalışır.

ASP.NET MVC ve jQuery ile dinamik listeler kullanma makalesinin tamamı için:

MVC ve jQuery ile Dinamik Seçim Listeleri

Chrome'da bu çözümde bir sıralama sorunu var (jQuery 1.7.1) (Chrome, nesne özelliklerini ad / numaraya göre sıralar mı?) Bu nedenle, düzeni korumak için (evet, nesne kötüye kullanımı), bunu değiştirdim:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

buna

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

ve sonra $ .each şöyle görünecektir:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Her yerde aynı kodu tekrarlamak yerine, kendi jQuery fonksiyonunuzu yazmak için daha arzu edilir olduğunu öneririm:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Sonra bir seçenek eklemek için aşağıdakileri yapmanız yeterlidir:

$('select').addOption('0', 'None');

Json dizinizi aşağıdaki kodla tekrarlayabilirsiniz

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

Önceki yanıtların tümü geçerli yanıtlar olsa da - tüm bunları önce bir documentFragmnet'e eklemeniz, ardından bu belge parçasını sonradan bir öğe olarak eklemeniz tavsiye edilebilir ...

John Resig'in konuyla ilgili düşüncelerine bakın ...

Çizgileri boyunca bir şey:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

1. $.each daha yavaş for döngüden
2. Her seferinde, bir DOM seçimi döngüdeki en iyi uygulama değildir $("#mySelect").append();

Yani en iyi çözüm şudur:

JSON veri varsa respolduğunu

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

olarak kullan

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Bunu yapmanın başka bir yolu:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Bu, DOM'yi ilk kez dev bir dize oluşturduktan sonra yalnızca bir kez işler.

Ben iki boyutlu diziler did: İlk sütun i eklemek öğedir innerHTMLarasında <option>. İkinci sütun i eklemek RECORD_ID edilir valuearasında <option>:

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);

2. JavaScript / Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }

Bir jQuery eklentisi burada bulunabilir: jQuery & AJAX kullanarak Kutuları Otomatik Olarak Doldurma .

Bunun basit olduğunu ve harika çalıştığını buldum.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

JSON biçimi:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Ve değerleri Ajax'taki Açılır menüde doldurmak için jQuery kodu:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

$ .Map () işlevini kullanarak bunu daha zarif bir şekilde yapabilirsiniz:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

HTML seçim kimliğinizi aşağıdaki satırda ayarlayın. Burada mySelectselect öğesinin kimliği olarak kullanılır.

   var options = $("#mySelect");

ardından bu senaryoda selectValues ​​olan nesneyi alın ve her döngü için jquery'ye ayarlayın. Nesnelerin değerini ve metnini buna göre kullanacak ve aşağıdaki gibi seçenek seçimlerine ekleyecektir.

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

Bu, açılır liste seçildiğinde metni seçenek listesi olarak görüntüler ve bir metin seçildikten sonra seçilen metnin değeri kullanılır.

Örneğin.

"1": "test 1", "2": "test 2",

Yıkılmak,

ekran adı: test 1 -> değer 1 ekran adı: test 2 -> değer 2

Aslında, daha iyi performans elde etmek için, seçenek listesini ayrı ayrı yapmak ve id'yi seçmek daha iyidir.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/