Javascript 使用jquery发布构建选择/下拉选项组

我想在JQuery的下拉列表中添加

。选项正常工作，但我无法使选项组工作

HTML:

JQuery：

$("#DropDownID")
colorBuild(function (result) {
    var Color = result;

    for (var i = 0; i < Color.Data.length; i++) {
        $("#DropDownID").append($("<optgroup></optgroup>").attr('label', Color.Data[i].ColorText)); //<-- This is my issue
        $("#DropDownID").append($("<option></option>").val(Color.Data[i].RgbValue).text(Color.Data[i].ColorText).html(Color.Data[i].ColorName)); //<-- This is working fine

    }
});

$（“#DropDownID”）
颜色构建（函数（结果）{
var颜色=结果；
对于（var i=0；i$（“#DropDownID”）.append（$（“”）.attr（'label'，Color.Data[i].ColorText））；//使用label命名组，然后将每个选项添加到组中

$("#DropDownID")
colorBuild(function (result) {
    var Color = result;

    //create a constant for element
    const $sel = $('#DropDownID');

    //create a variable to hold our optgroup
    var group = $('<optgroup/>');

    //assign label to optgroup and append to select element
    group.attr('label', 'Foo2').appendTo($sel);


    for (var i = 0; i < Color.Data.length; i++) {

        //probably only need .html here, anyway, append to group
        $('<option />').val(Color.Data[i].RgbValue).text(Color.Data[i].ColorText).html(Color.Data[i].ColorName).appendTo(group);

    }
}

$（“”）.val（'Foo2'）
此
optgroup
不能包含简单值。嗨，布莱恩，谢谢你的回答。不过我需要optgroup作为变量。很抱歉，我的问题不清楚。我尝试使用
group.attr（'label'，Color.Data[I].ColorText.）.appendTo（$sel）
在for循环中，但它不起作用。要在“函数GetSelectedItem（el）”中获取所选的optgroup，我尝试将您的解决方案作为静态解决方案，但仍然得到了未定义的
。
{element: n.fn.init(1), index: 0, value: "df514f", label: "Red", optgroup: "Foo", …} //<-- this is coming from static HTML
56d6736dfe2cf81830b7ec0f:124 {element: n.fn.init(1), index: 1, value: "df514f", label: "Red", optgroup: "", …} //<-- I want to be able to add a value here with JQuery code above
56d6736dfe2cf81830b7ec0f:124 {element: n.fn.init(1), index: 2, value: "CD69C9", label: "Orchild", optgroup: "", …}

function GetSelectedItem(el)
{
    var e = document.getElementById(el);

    color = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
    colorName = e.options[e.selectedIndex].text;
    colorValue = e.options[e.selectedIndex].value;
    optgroupValue = e.options[e.selectedIndex].optgroup; //<-- this is resolving as undefined
}

$("#DropDownID")
colorBuild(function (result) {
    var Color = result;

    //create a constant for element
    const $sel = $('#DropDownID');

    //create a variable to hold our optgroup
    var group = $('<optgroup/>');

    //assign label to optgroup and append to select element
    group.attr('label', 'Foo2').appendTo($sel);


    for (var i = 0; i < Color.Data.length; i++) {

        //probably only need .html here, anyway, append to group
        $('<option />').val(Color.Data[i].RgbValue).text(Color.Data[i].ColorText).html(Color.Data[i].ColorName).appendTo(group);

    }
}

optGroup = e.options[this.selectedIndex].parentNode.label