Ajax заполняет SelectList группами опций

Могу ли я получить помощь, чтобы заполнить SelectList группами опций с помощью Ajax?

Я правильно закодировал добавление элементов, но не уверен, как добавить группы параметров.

Вот мой код 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>

jquery ajax asp.net-mvc-5 selectlist selectlistitem
person user3736648    schedule 20.01.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Если вы сохранили предыдущее имя группы, вы можете добавить новую группу при изменении значения. Что-то вроде этого:

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

Пример скрипта

person Rory McCrossan    schedule 20.01.2015
comment
Не могли бы вы взглянуть на мое редактирование об отступах элементов группы? - person user3736648; 20.01.2015
comment
Я скопировал исходный код того, что мне нужно. Ваш выведенный код немного отличается. - person user3736648; 20.01.2015
comment
Спасибо. Теперь работает отлично. - person user3736648; 20.01.2015

arrow_upward
0
arrow_downward

Вы можете сгруппировать данные в группы, а затем создать группы опций в своей разметке:

success: function (data) {
    var newData = {};

    $.each(data, function () {
        if (newData[this.Group.Name]) {
            newData[this.Group.Name].push(this);
        } else {
            newData[this.Group.Name] = [this];
        }
    });
    $("#fileId").empty();
    for (var item in newData) {
        var group = $("#fileId").append($("<optgroup label='" + item + "' />");
        $.each(newData[item], function () {
            group.append($("<option />").val(this.Value).text(this.Text));
        });
    }
}
person Konstantin Dinev    schedule 20.01.2015

arrow_upward
-1
arrow_downward

Попробуйте это, я просто очистил html под оператором и добавил новые.

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

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

    },
    success: function (data) {
        $("select#fileId").html('');

        $.each(data, function () {
            $("select#fileId").append('<option value="' + this.Value + '">'+this.Text+'</option>');
        });
    }
});
person Ritish Vermani    schedule 20.01.2015
comment
Это то, что уже сделал код ОП ($("#fileId").empty()), а также вы не создали никаких тегов optgroup, как просил ОП...? - person Rory McCrossan; 20.01.2015