javascript html选择动态添加optgroup和选项

Question

假设我有一个<select id="chat" size="9" />,我想添加一些optgroup和选项,就像这样

http://jsfiddle.net/ZP4E9/

像这样的对象

{friendchat:[{name:"somefriend1",...},{name:"somefriend2",...},
otherchat:[{name:"someother1",...},{name:"someother2",...},
friendrequest:[{name:"somerequest1",...},{name:"somerequest2",...},
sentrequest:[{name:"somesent1",...},{name:"somesent2",...}]

编辑:键入输入而不是选择...

Answer 1

Sample fiddle

你可以(需要)使用:

• document.createElement()
  • 按类型创建元素.例如选项或选择.
• element.appendChild()
  • 将创建的元素添加到另一个
• element.textContent或者element.innerHTML或element.innerText
  • 设置文本值.

有选项对象:

var opt = {
    friendchat:[
        {name:"somefriend1"},
        {name:"somefriend2"}
    ],
    otherchat:[
        {name:"someother1"},
        {name:"someother2"}
    ],
    friendrequest:[
        {name:"somerequest1"},
        {name:"somerequest2"}
    ],
    sentrequest:[
        {name:"somesent1"},
        {name:"somesent2"}
    ]
};

将select放入的包装器:

<div id="wrap_sel"></div>

我们可以添加例如:

/* Build option group.
 * @sel : Select element to add group to.
 * @lab : Label for option group.
 * @opts: Options Array.
 * * * * * * * * * * * * * * * * * * * * * * * * * */
function add_optgr(sel, lab, opts) {
    var i, 
        len = opts.length, opt,
        gr = document.createElement('OPTGROUP');

    gr.label = lab;
    for (i = 0; i < len; ++i) {
        opt = document.createElement('OPTION');
        opt.textContent = opts[i].name;
        // Here you most likely also want to set .value
        // opt.value = opts[i].value;
        gr.appendChild(opt);
    }
    sel.appendChild(gr);
    return gr;
}

/* Build the select.
 * @wrap: Container where to add finished product.
 * @size: Size attribute for select.
 * @opt : Options object.
 * * * * * * * * * * * * * * * * * * * * * * * * * */
function build_select(wrap, size, opt) {
    var sel = document.createElement('SELECT'),
        prop;
    size = size || 1;
    sel.size = size;
    for (prop in opt)
        if (opt.hasOwnProperty(prop))
            add_optgr(sel, prop, opt[prop]);
    wrap.appendChild(sel);
}

/* On DOM ready, build the select. */
build_select(
    document.getElementById('wrap_sel'),
    9,
    opt
);

正如在代码中所评论的那样,您可能也希望为选项提供值.为您提供选项对​​象结构,如:

var opt = {
    friendchat:[
        {name: "Some Friend 1", value: "friend1"},
        {name: "Some Friend 2", value: "friend2"}
    ],
    ...
};

Answer 2

嗯,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);
    });
});