Cách liên kết <select> từ danh sách các giá trị được tách nhau bằng dấu phẩy trong JQuery?

Question

Cách chúng tôi có thể liên kết thẻ chọn với dữ liệu biến? ..

Đây là mã mẫu của tôi ở đây.

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

Tôi muốn Bind chọn thẻ của tôi sử dụng trên ngôn ngữ

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

Làm thế nào để ràng buộc "langsel" chọn với biến trên.?

tôi cần đầu ra như dưới đây:

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

}); 

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

Answer 2

Câu trả lời là ở đây: What is the best way to add options to a select from an array with jQuery?

Vòng qua ngôn ngữ của bạn trong một vòng lặp for, và sử dụng mã trong câu trả lời rằng ở trên.

Answer 3

Các nhanh nhất (gõ) cách để làm điều đó sẽ được đầu tiên xây dựng chuỗi HTML, và sau đó chèn nó vào <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]) 

    ); 
}); 

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

Answer 5

Bạn có thể làm một cái gì đó như thế này:

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

Bạn chắc chắn có thể làm điều này bằng tay, nhưng để cho vui, đây là loại điều jQuery Templates được thiết kế để làm. Thẻ {{each}} sẽ cho phép bạn lặp qua một mảng hoặc đối tượng, xây dựng một số HTML động khi bạn thực hiện.

Đầu tiên thiết lập mẫu:

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

Đây là HTML trống <select> để được lấp đầy với <option> thẻ mới:

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

đối tượng ngôn ngữ của bạn:

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

Sau đó, phần dễ dàng:

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

Đây là ví dụ làm việc: http://jsfiddle.net/redler/nHtH3/