Jquery - Populate DropDown kutusu ile dizi içeriği

Question

Bunun gerçekten kolay olması gerekiyordu, ancak bir nedenden dolayı bunun online cevabı bulamıyorum .. AJAX isteğinden sonra aldığım bir dizim var ve içeriğini doldurmak istiyorum Basit bir açılır kutu. Yani diyelim ki benim dizisidir:

var workers = ["Steve", "Nancy", "Dave"]; 

Ve ben bir AJAX çağrısından ne alırsınız bağlı dinamik doldurmak isteyen basit açılan kutu var: Yapabileceğim nasıl

<div id='dropdown'> 
    <select> 
    <option value=""></option> 
    <option value=""></option> 
    <option value=""></option> 
    </select> 
</div> 

doğru mu? Çok teşekkürler!

Answer 1

Basitçe yeni jQuery nesnesi oluşturmak seçim listesine ekler:

<div id='dropdown'> 
    <select> 
    </select> 
</div> 

Böyle bir şey kullanabilirsiniz. Sadece yukarıdaki div yerine bir kimlik seçerseniz, daha kolay. her zaman basitçe seçeneğin değerlerini değiştirebilir açılan 3 seçenek varsa

for(var i=0; i< workers.length;i++) 
{ 
//creates option tag 
    jQuery('<option/>', { 
     value: workers[i], 
     html: workers[i] 
     }).appendTo('#dropdown select'); //appends to select if parent div has id dropdown 
} 

Answer 2

böyle seçme varsa: o zaman

for(var i = 0; i < workers.length; i++) { 
    $('#dropdown select').append('<option value='+i+'>'+workers[i]+'</option>'); 
} 

Answer 3

: Çok seçeneklerin sayısını değiştirmek isterseniz

var workers = ["Steve", "Nancy", "Dave"]; 
for(var i in workers) { 
    $("#dropdown option").eq(i).html(workers[i]); 
    $("#dropdown option").eq(i).val(workers[i]); 
} 

, tüm kaldırmak isteyebilirsiniz seçenekleri mevcut ve bunun gibi, hepsi yeniden ekleyin:

var workers = ["Steve", "Nancy", "Dave"]; 
$("#dropdown select").empty(); 
for(var i in workers) { 
    $("#dropdown select").append('<option value='+i+'>'+workers[i]+'</option>'); 
} 

Answer 4

---

Dizi ile döngü ve Opti eklemek onları DOM üzerinde oluşturup değerlerini ayarlayarak seçime geçer. bu deneyin:

 var workers = ["Steve", "Nancy", "Dave"]; 
     $.each(workers,function(){ 
      var option = document.createElement('option'); 
      $('#dropdown select').append($(option).attr('value',this).html(this)); 
     }); 

Answer 5

$ .map() işlevini kullanarak, daha zarif bir şekilde yapabilirsiniz:

$('#dropdown select').html($.map(workers, function(i){ 
    return '<option value="' + i + '">'+ i + '</option>'; 
}).join(''));