Hinzufügen von optgroup im Auswahlmenü

Question

Ich habe eine jQuery-Code, der erstellen wird select von einer ul li menu . Ich möchte hinzufügen optgroup aus dem übergeordneten Menü, aber ich weiß nicht, wie das geht. Hier ist mein Code:

// 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();
});

Answer 1

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

Beispiel hier.

Ein weiteres Beispiel, das Daten von ul. Code:

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