在选择菜单中添加optgroup

时间:2012-10-09 09:47:45

标签: javascript jquery

我有一个jQuery代码,它将从select创建ul li menu。我想从父菜单添加optgroup,但不知道如何。这是我的代码:

// Create the dropdown base
jQuery("<select />").appendTo("#module-menu");

// Create default option "Go to..."
jQuery("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Go to..."
}).appendTo("#module-menu select");

// Populate dropdown with menu items
jQuery("#menu a").each(function() {
    var el = jQuery(this);
    jQuery("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
 }).appendTo("#module-menu select");
});
jQuery("#module-menu select").change(function() {
    window.location = jQuery(this).find("option:selected").val();
});

1 个答案:

答案 0 :(得分:3)

$('#parent')
    .append($('<select>')
        .append($('<optgroup>')
            .prop('label', 'group 1')
            .append($('<option>')
                .text('option 1'))));​

Example here.

Another example taking data from ul.代码:

var sel = $('<select>');
$('#parent').append(sel);

$('#menu>li').each(function()
{
    var group = $('<optgroup>')
        .prop('label', $(this).find('>span').text());
    sel.append(group);

    $(this).find('ul>li').each(function()
    {
        var opt = $('<option>')
            .text($(this).find('>span').text());
        group.append(opt);
    });
});​