如何从 JQuery 中的逗号分隔值列表中绑定 <select>?
Posted
技术标签:
【中文标题】如何从 JQuery 中的逗号分隔值列表中绑定 <select>?【英文标题】:How to bind <select> from list of comma separated values in JQuery? 【发布时间】:2011-10-30 08:49:51 【问题描述】:我们如何将选择标签与可变数据绑定?..
这是我的示例代码。
<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>
【问题讨论】:
【参考方案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/
【讨论】:
【参考方案2】:答案在这里:What is the best way to add options to a select from an array with jQuery?
在 for 循环中遍历您的语言,并使用上述答案中的代码。
【讨论】:
【参考方案3】: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/
【讨论】:
【参考方案4】:最快的(键入)方法是首先构建 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;
【讨论】:
【参考方案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/
【讨论】:
【参考方案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/
【讨论】:
以上是关于如何从 JQuery 中的逗号分隔值列表中绑定 <select>?的主要内容,如果未能解决你的问题,请参考以下文章