Come associare <select> dall'elenco di valori separati da virgola in JQuery?

Question

Come possiamo associare il tag select con dati variabili? ..

Ecco il mio codice di esempio qui.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script> 
var google.language.Languages = { 
    'AFRIKAANS' : 'af', 
    'ALBANIAN' : 'sq', 
    'AMHARIC' : 'am', 
    'ARABIC' : 'ar', 
    'ARMENIAN' : 'hy', 
    'AZERBAIJANI' : 'az' ... 
} 
</script> 

voglio Associare il mio tag select usando sopra lingue

<select id="langsel" name="selector"> 
     <option value="">Select a language</option> 
</select> 

Come associare "langsel" selezionare con la variabile di cui sopra.?

Ho bisogno di output come qui di seguito:

<select id="langsel" name="selector"> 
      <option value="">Select a language</option> 
      <option value="af">AFRIKAANS</option> 
      .... 
    </select> 

Answer 1

$(function() { 

    var languages = { 
     'AFRIKAANS' : 'af', 
     'ALBANIAN' : 'sq', 
     'AMHARIC' : 'am', 
     'ARABIC' : 'ar', 
     'ARMENIAN' : 'hy', 
     'AZERBAIJANI' : 'az' 
    } 

    var sel = $('#langsel'); 

    $.each(languages, function(key, value) { 
     sel.append('<option value="'+value+'">'+key+'</option>'); 
    }); 

}); 

lavoro Fiddle: http://jsfiddle.net/qtb6S/

Answer 2

La risposta è qui: What is the best way to add options to a select from an array with jQuery?

loop attraverso le lingue in un ciclo for, e utilizzare il codice in quella risposta di cui sopra.

Answer 3

L'(al tipo) modo più rapido per farlo sarebbe quello di costruire prima la stringa HTML e quindi inserirla nel <select>:

var languages = { /* ... */ }, 
    str = '', 
    hop = Object.prototype.hasOwnProperty, 
    x; 

for (x in languages) { 
    if (hop.call(languages, x)) { 
     str += '<option value="' + languages[x] + '">' + x + '</option>'; 
    } 
} 
document.getElementById('langsel').innerHTML += str; 

Answer 4

var languages = [ 
    'AFRIKAANS : af', 
    'ALBANIAN : sq', 
    'AMHARIC : am', 

] 

$.each(languages,function(index,elem){ 
    $("#langsel").append(

    $("<option/>").val(elem.split(':')[1]).text(elem.split(':')[0]) 

    ); 
}); 

violino http://jsfiddle.net/3dFgg/

Answer 5

Si potrebbe fare qualcosa di simile:

var sel = $("#langsel"); 
var html = ""; 
var items = Languages; 
html = $("<option></option>").text("Select a Language").val(""); 
sel.append(html); 
html = ""; 
for (var index in items) { 
    html = $("<option></option>").text(index).val(items[index]); 
    sel.append(html); 
    html = ""; 
}  

jsFiddle http://jsfiddle.net/FXta5/

Answer 6

Si può certamente farlo manualmente, ma per divertimento, questo è il genere di cose jQuery Templates sono progettati per fare. Il tag {{each}} ti consente di scorrere su un array o un oggetto, creando un HTML dinamico mentre procedi.

configurare prima il modello:

<script id="optionTemplate" type="text/x-jquery-tmpl"> 
    {{each(lang,abbrev) $data}} 
    <option value="${abbrev}">${lang}</option> 
    {{/each}} 
</script> 

Ecco il codice HTML vuota <select> da riempire con nuove <option> tag:

<select id="langsel" name="selector"> 
    <option value="">Select a language</option> 
</select> 

vostro linguaggio:

var langs = { 
    'AFRIKAANS': 'af', 
    'ALBANIAN': 'sq', 
    'AMHARIC': 'am', 
    'ARABIC': 'ar', 
    'ARMENIAN': 'hy', 
    'AZERBAIJANI': 'az' 
}; 

Poi il parte facile:

$("#optionTemplate").tmpl(langs).appendTo("#langsel"); 

Ecco un esempio funzionante: http://jsfiddle.net/redler/nHtH3/