如何從JQuery中的逗號分隔值列表中綁定<select>？

Question

如何將變量數據綁定到選擇標籤？

這裏是我的示例代碼。

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

我想我綁定選擇標籤使用以上語言

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

如何綁定 「langsel」 上面的變量選擇？

我需要一個像下面輸出：

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

}); 

工作小提琴：http://jsfiddle.net/qtb6S/

Answer 2

答案就在這裏：What is the best way to add options to a select from an array with jQuery?

遍歷您的語言在for循環中，並在上面的答案中使用的代碼。

Answer 3

最快的（輸入）的方式做這將是第一個建立HTML字符串，然後將其插入<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]) 

    ); 
}); 

小提琴http://jsfiddle.net/3dFgg/

Answer 5

你可以做這樣的事情：

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

你當然可以手動做到這一點，但爲了好玩，這是哪門子的事jQuery Templates設計做。 {{each}}標籤可讓您循環訪問數組或對象，隨時隨地構建動態HTML。

首先設置模板：

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

下面是空的HTML <select>來填充新<option>標籤：

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

你的語言對象：

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

然後易零件：

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

下面是一個工作示例：http://jsfiddle.net/redler/nHtH3/