http://jsfiddle.net/ZP4E9/
与这样的对象
{friendchat:[ {name:somefriend1,...},{name:somefriend2,...},
otherchat:[{name:someother1,...},{name:someother2, ...},
friendrequest:[{name:somerequest1,...},{name:somerequest2,...},
sentrequest:[{name:somesent1, ...},{name:somesent2,...}]
编辑:而不是select ...
解决方案
那么,jQuery怎么样?
http://jsfiddle.net/ZP4E9/2/
var opt = {
friendchat:[
{name:somefriend1},
{name:somefriend2}
],
otherchat:[
{name:someother1},
{name:someother2}
],
friendrequest:[
{name:somerequest1},
{name:somerequest2}
],
sentrequest:[
{name:somesent1},
{name:somesent2}
]
};
$ b $(function(){
var $ select = $('#mySelect');
$ .each(opt,function(key,value){
$ var $ group $('< optgroup label =''+ key +'/>');
$ .each(value,function(){
$('< option / >').html(this.name).appendTo(group);
});
group.appendTo($ select);
});
});
let say i have a <select id="chat" size="9" />
, i want to add some optgroup and option which will be like this
http://jsfiddle.net/ZP4E9/
with object like this
{friendchat:[{name:"somefriend1",...},{name:"somefriend2",...},
otherchat:[{name:"someother1",...},{name:"someother2",...},
friendrequest:[{name:"somerequest1",...},{name:"somerequest2",...},
sentrequest:[{name:"somesent1",...},{name:"somesent2",...}]
edit: typed input instead of select...
解决方案
Well, how about jQuery ?
http://jsfiddle.net/ZP4E9/2/
var opt = {
friendchat:[
{name:"somefriend1"},
{name:"somefriend2"}
],
otherchat:[
{name:"someother1"},
{name:"someother2"}
],
friendrequest:[
{name:"somerequest1"},
{name:"somerequest2"}
],
sentrequest:[
{name:"somesent1"},
{name:"somesent2"}
]
};
$(function(){
var $select = $('#mySelect');
$.each(opt, function(key, value){
var group = $('<optgroup label="' + key + '" />');
$.each(value, function(){
$('<option />').html(this.name).appendTo(group);
});
group.appendTo($select);
});
});
这篇关于javascript html选择动态添加optgroup和选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!