Jquery - Popola casella DropDown con contenuto di array

Question

Questo dovrebbe essere davvero facile ma per qualche motivo non riesco a trovare una risposta per esso online .. Ho una matrice che ricevo dopo richiesta AJAX e voglio popolare il suo contenuto una semplice casella a discesa. Quindi diciamo che è la mia matrice:

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

e ho una semplice casella a discesa che voglio popolare dinamicamente a seconda quello che avrò da una chiamata AJAX:

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

Come posso fare correttamente? Grazie mille !!

Answer 1

è sufficiente creare un nuovo oggetto Jquery quindi aggiungere alla lista di selezione. Più facile se si dà alla selezione un ID invece del div al di sopra di esso.

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

Se avete la select in questo modo:

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

si potrebbe usare qualcosa di simile:

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

Answer 3

Se avete sempre 3 opzioni nel menu a discesa si può semplicemente cambiare i valori dell'opzione:

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

Se si desidera cambiare il numero di opzioni troppo, si consiglia di rimuovere tutti le opzioni esistenti e aggiungere nuovamente tutti loro, in questo modo:

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

Answer 4

---

bisogna scorrere l'array e aggiungere l'opti alla selezione, creandoli sul DOM e impostandone i valori. Prova questo:

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

Answer 5

Utilizzando la funzione $ .map(), è possibile farlo in un modo più elegante:

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