Jquery - Populate DropDown Box z zawartością tablicy

Question

To powinno być naprawdę łatwe, ale z jakiegoś powodu nie mogę znaleźć odpowiedzi na to online .. Mam tablicę, którą otrzymuję po żądaniu AJAX i chcę wypełnić jej zawartość prosty dropdown box. Więc powiedzmy, że moja tablica:

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

I mam proste okno rozwijaną, którego chcę, aby wypełnić dynamicznie w zależności od tego, co dostanę od wywołania AJAX:

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

Jak mogę zrobić to właściwie? Wielkie dzięki!

Answer 1

Wystarczy utworzyć nowy obiekt jQuery następnie dołączyć go do listy select. Łatwiejsze, jeśli po prostu podasz identyfikator wyboru zamiast div powyżej.

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

Jeśli masz select tak:

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

Można użyć coś takiego:

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

Answer 3

Jeśli zawsze masz 3 opcje w menu rozwijanym po prostu można zmienić wartości opcji:

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

Jeśli chcesz zmienić liczbę opcji też, można usunąć wszystkie istniejących opcji i ponownie dodać wszystkie z nich, podobnie jak to:

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

Answer 4

---

masz pętli tablicy i dodać Opti włącza się do zaznaczenia, tworząc je w DOM i ustawiając ich wartości. Spróbuj tego:

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

Answer 5

Korzystanie z funkcji $ .map(), można to zrobić w bardziej elegancki sposób:

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