javascript fill optogrouped下拉列表

Question

我有一个Ajax调用，从silverstripe函数返回一个数组。

{
    "null":"-- Person / choose Email --",
    "System":{
        "default":"donald@duckburg.com"},
    "Office":{
        "21":"daisy@duckburg.com",
        "22":"dagobert@duckburg.com",
        "23":"donald@duckburg.com",
        "24":"goofy@duckburg.com"
        },
    "Workshop":{
        "22":"dagobert@duckburg.at"
        }
}

我试图填写一个选项-分组-下拉菜单没有成功。

$.ajax({
    url: "StringImage_Ajax/dropdownSource",
    type: "POST",
    dataType: "json",
    async:false
}).done(function(data){
    dddata = JSON.stringify(data.string);
    console.log('data = ' + dddata);
    var dropdown = $('#StringEmail');

    /*$.each(dddata, function (key, cat) {
        console.log(key + ' _ ' + cat);
        var group = $('<optgroup>',{label:key});
        $.each(cat,function(i,item) {
            $("<option/>",{value:item.id,text:item.name})
                .appendTo(group);
        });
        group.appendTo(dropdown);
    });*/

});

每个功能如何更改才能正常工作？

在此先感谢。

更新：

感谢@Endless工作代码：

var dropdown = $('#StringEmail').empty();

                $.each(dddata, function (key, cat) {
                    if (typeof cat === 'string') {
                        $('<option/>', {value:key,text:cat}).appendTo(dropdown)
                        return
                    }
                    var group = $('<optgroup>', {label: key});

                    $.each(cat, function(value, text) {
                        $("<option/>", {value:value,text:text}).appendTo(group);
                    });
                    group.appendTo(dropdown);
                });

Answer 1

不必要显示ajax部分，但是无论如何...您几乎明白了。

var dropdown = $("<select>")

$.each(dddata, function (key, cat) {
  if (typeof cat === 'string') {
    $('<option disabled>', {text: cat})
    .appendTo(dropdown)
    return
  }

  var group = $('<optgroup>', {label: key})

  $.each(cat, function(value, text) {
    $('<option>', {value, text})
    .appendTo(group);
  });

  group.appendTo(dropdown);
})