Cómo enlazar <select> de la lista de valores separados por comas en JQuery?

Question

¿Cómo podemos vincular la etiqueta de selección con datos variables? ..

Aquí está mi código de muestra aquí.

<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> 

quiero atarme seleccione la etiqueta usando por encima de idiomas

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

Cómo enlazar "langsel" seleccione con la variable anterior.?

necesito de salida, como a continuación:

<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>'); 
    }); 

}); 

de Trabajo del violín: http://jsfiddle.net/qtb6S/

Answer 2

la respuesta está aquí: What is the best way to add options to a select from an array with jQuery?

bucle a través de sus lenguas en un bucle, y utilizando un código en la respuesta anterior.

Answer 3

La forma más rápida (con el tipo) para hacerlo sería construir primero la cadena HTML, y luego insertarlo en el <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]) 

    ); 
}); 

violín http://jsfiddle.net/3dFgg/

Answer 5

se podría hacer algo como esto:

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

Por supuesto que puede hacerlo de forma manual, pero para la diversión, este es el tipo de cosas jQuery Templates están diseñados para hacer. La etiqueta {{each}} le permitirá iterar sobre una matriz u objeto, construyendo HTML dinámico sobre la marcha.

Primero creó la plantilla:

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

Aquí está el vacío de HTML <select> para ser llenado con nuevos <option> etiquetas:

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

Su objeto de lenguaje:

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

A continuación, el parte fácil:

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

Aquí está un ejemplo de trabajo: http://jsfiddle.net/redler/nHtH3/