How to bind <select> from list of comma separated values in JQuery?
How we can bind select tag with variable data?..
Here is my sample code here.
<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>
I want Bind my select tag using above languages
<select id="langsel" name="selector">
<option value="">Select a language</option>
</select>
How to bind "langsel" select with above variable.?
I need output like below :
<select id="开发者_StackOverflow中文版langsel" name="selector">
<option value="">Select a language</option>
<option value="af">AFRIKAANS</option>
....
</select>
$(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/
The answer is here: What is the best way to add options to a select from an array with jQuery?
Loop through your languages in a for loop, and use the code in that answer above.
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/
The quickest (to type) way to do it would be to first build the HTML string, and then insert it into the <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;
You could do something like this:
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/
You can certainly do this manually, but for fun, this is the sort of thing jQuery Templates are designed to do. The {{each}}
tag will let you iterate over an array or object, building some dynamic HTML as you go.
First set up the template:
<script id="optionTemplate" type="text/x-jquery-tmpl">
{{each(lang,abbrev) $data}}
<option value="${abbrev}">${lang}</option>
{{/each}}
</script>
Here's the empty HTML <select>
to be filled with new <option>
tags:
<select id="langsel" name="selector">
<option value="">Select a language</option>
</select>
Your language object:
var langs = {
'AFRIKAANS': 'af',
'ALBANIAN': 'sq',
'AMHARIC': 'am',
'ARABIC': 'ar',
'ARMENIAN': 'hy',
'AZERBAIJANI': 'az'
};
Then the easy part:
$("#optionTemplate").tmpl(langs).appendTo("#langsel");
Here's a working example: http://jsfiddle.net/redler/nHtH3/
精彩评论