Question

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

有这样的对象

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

Answer 3

这是针对空的默认选择选项并添加新的

var select_option = '';
for (i=0; i<response.length; i++){
options += '<option value="'+i+'">'+i+'</option>'
}    

$('.selectclassname').html('').append(select_option)

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

3 个答案: