CODEWITHSUNDEEP
javascriptjqueryasp.netsharepoint
Alla
Alla

Reputation: 43

Populate dropdown list dynamically using jquery

I'm using SharePoint 2010, jquery-1.9.0.min.js and need to populate asp dropdown list based on users' AD groups. I already have the code getting AD groups and getting the values that need to go into dropdown list. The dropdown list would have any combination of 2 to 4 items (text and values), then selected item should flow into the web parts on the same web page. I'm new to SharePoint/jquery and not sure how setup the dropdown list options dynamically. I had setup dropdown list with bogus texts and values and need to replace it with valid values for each user. I'd like to use jquery if possible. If there is another simpler way - please let me know. I'd need to know how to add 1 or 2 additional options if needed.

<asp:DropDownList runat="server" id="DropDownList1" AutoPostBack="True">
                            <asp:ListItem value="06">Fac1</asp:ListItem>
                            <asp:ListItem value ="07">Fac2</asp:ListItem>
                        </asp:DropDownList>

Upvotes: 0

Views: 4749

Answers (1)

Colin
Colin

Reputation: 4135

Here's a good example: http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/

...and a code sample from the blog. In your case, "#ddlGender" should be populated with the .ClientID property of your DropDownList control and you'll need to tweak the call and processing to fit your specific situation:

$().ready(function() {
$.ajax({
    type: "POST",
    url: "Default.aspx/GetGenders",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
        success: function(msg) {
            $("#ddlGender").get(0).options.length = 0;
            $("#ddlGender").get(0).options[0] = new Option("Select gender", "-1");   

            $.each(msg.d, function(index, item) {
                $("#ddlGender").get(0).options[$("#ddlGender").get(0).options.length] 
                      = new Option(item.Display, item.Value);
            });
        },
        error: function() {
            alert("Failed to load genders");
        }
    });
});

Upvotes: 1

Related Questions