jquery - Ajax 使用选项组填充 SelectList

Question

请帮忙使用 Ajax 填充 SelectList 和选项组吗？

我已正确编码添加项目，但不确定如何添加选项组。

这是我的有效 Ajax 代码:

var category = $(this).val();

$.ajax({
    type: "POST",
    async: true,
    url: '/TestController/Test',
    data: {
        'category': category
    },
    dataType: "json",
    error: function () {

    },
    success: function (data) {
        $("#fileId").empty();

        $.each(data, function () {
            $("#fileId").append($("<option />").val(this.Value).text(this.Text));
        });
    }
});

这是调用的函数:

public async Task<string> Test(string category)
{
    var items = new List<SelectListItem>();
    items.Add(new SelectListItem() { Value = "1", Text = "Item 1" });
    items.Add(new SelectListItem() { Value = "2", Text = "Item 2" });
    items.Add(new SelectListItem() { Value = "3", Text = "Item 3" });

    return new JavaScriptSerializer().Serialize(items);
}

我现在想将选项组添加到选择列表中。

这是我正在使用选项组调用的新函数:

public async Task<string> Test(string category)
{
    var Group1 = new SelectListGroup() { Name = "Group 1" };
    var Group2 = new SelectListGroup() { Name = "Group 2" };

    var items = new List<SelectListItem>();
    items.Add(new SelectListItem() { Value = "1", Text = "Item 1", Group = Group1 });
    items.Add(new SelectListItem() { Value = "2", Text = "Item 2", Group = Group2 });
    items.Add(new SelectListItem() { Value = "3", Text = "Item 3", Group = Group2 });

    return new JavaScriptSerializer().Serialize(items);
}

如何以与第一个示例相同的方式填充 SelectList，但使用选项组？

提前致谢。

编辑

我需要将组项目缩进如下图所示(忽略项目和组名称):

这是需要输出的正确 HTML 代码:

<optgroup label="Public">
<option value="1">Green - test.png</option>
<option value="3">Yellow - test.png</option>
</optgroup>
<optgroup label="User">
<option value="5">Yellow534x300.png</option>
</optgroup>
</select>

@Rory McCrossan:您的代码输出以下内容:

<optgroup label="Group 1"></optgroup><option value="1">Item 1</option><optgroup label="Group 2"></optgroup><option value="2">Item 2</option><option value="3">Item 3</option></select>

Answer 1

如果您存储以前的组名称，则可以在值更改时添加新组。像这样的事情:

success: function(data) {
    $("#fileId").empty();
    var $prevGroup, prevGroupName;
    $.each(data, function () {
        if (prevGroupName != this.Group.Name) {
            $prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#fileId');
        }
        $("<option />").val(this.Value).text(this.Text).appendTo($prevGroup);
        prevGroupName = this.Group.Name;
    });
});

Example fiddle