javascript fill optogrouped dropdown

Question

У меня есть вызов Ajax, возвращающий массив из silverstripe-function.

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

}); 

Каким образом каждая - функция должна быть изменена, чтобы работать должным образом?

благодарит заранее.sepp.

UPDATE:

благодаря @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

Ненужные, чтобы показать Аякса часть, но так или иначе ... Вы почти получили его.

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