javascript填充optogrouped下拉列表

时间:2016-10-11 11:13:56

标签: javascript arrays drop-down-menu

我有一个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);
    });*/

});
  

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

提前感谢.sepp。

更新

感谢@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);
                });

1 个答案:

答案 0 :(得分:0)

不必显示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);
})