CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-5selectlistselectlistitem
Simon
Simon

Reputation: 8357

Ajax populate SelectList with Option Groups

May I please have some help to populate a SelectList with Option Groups using Ajax?

I have coded adding the items correctly, but am not sure on how to add the Option Groups.

Here is my Ajax code that works:

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

Here is the function that is called:

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

I now would like to add Option Groups to the SelectList.

Here is my new function that is being called, with Option Groups:

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

How can I populate the SelectList the same way as in the first example, but with Option Groups?

Thanks in advance.

EDIT

I need the Group items to be indented as the same as the following image (Ignore the item and group names):

Indent

This is the correct HTML code that needs to be outputted:

<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: Your code outputs the following:

<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>

Upvotes: 2

Views: 6164

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337626

If you store the previous group name, you can add a new group when the value changes. Something like this:

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

Upvotes: 4

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

You can group the data in groups and then create the optgroups in your markup:

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

Upvotes: 0

Ritish Vermani
Ritish Vermani

Reputation: 139

Try this i just empty the html under statement and append the new ones.

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

Upvotes: -1

Related Questions