Add attribute to select list option

Question

I have a list of items in a drop down list within a Razor view. In the database each item has 3 values associated with it - the database id, short name (for display), and lo

Answer 1

I had a similar situation where I needed to pass a third value to each of the list items to determine the action to take in a jQuery function. Here is my solution (which will allow you to add any number of attributes to each item in the drop down):

First, I created a SelectListItemWithAttributes class as follows:

    public class SelectListItemWithAttributes : SelectListItem {
        public IDictionary HtmlAttributes { get; set; }
    }

This allows me to create items for the select list with the extra attributes attached.

Second, I created an HTML helper method called DropDownListWithItemAttributesFor as follows:

public static MvcHtmlString DropDownListWithItemAttributesFor(this HtmlHelper htmlHelper, Expression> expression, IEnumerable selectList) {
    string name = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)); 

    var selectDoc = XDocument.Parse(htmlHelper.DropDownList(name, (IEnumerable)selectList).ToString());

    var options = from XElement el in selectDoc.Element("select").Descendants()
                          select el;

    for (int i = 0; i < options.Count(); i++){
        var option = options.ElementAt(i);
        var attributes = selectList.ElementAt(i);

        foreach (var attribute in attributes.HtmlAttributes){
                    option.SetAttributeValue(attribute.Key, attribute.Value);
        }
    }

    selectDoc.Root.ReplaceNodes(options.ToArray());
    return MvcHtmlString.Create(selectDoc.ToString());
}

This allows me to create a drop down using the new SelectListWithAttributes class as the attributes. Basically, it creates the HTML for the drop down list, parses it into an XML document, then adds any items in the HtmlAttributes array as additional attributes to each item in the drop down.

Third, in my ViewModel code I have the following:

private List pDropDownDatas = null;
public List DropDownDatas {
    get {
        var DropDownDataItems = (
            from c in db.GetDropDownDataList(1, 1000)
            where c.AccountTypeID == this.AccountTypeID
            select new SelectListItemWithAttributes() { Text = c.Title, Value = c.ID.ToString(), HtmlAttributes = new Dictionary { { "data-callback", c.RequiresCallback.ToString().ToLower() } } } ).ToList()
            ;

        DropDownDataItems.Insert(0, new SelectListItemWithAttributes() { Text = "-- Select --", Value = "", HtmlAttributes = new Dictionary { { "data-callback", "false" } } });

        return DropDownDataItems;
    }
}

This builds the list of SelectListItemsWithAttributes that are going to ultimately populate the dropdown. This could be in a controller instead of the viewmodel, I just elected to make it a property of my viewmodel.

Lastly, in the view it would look like this:

@Html.DropDownListWithItemAttributesFor(m => m.DropDownDataID, Model.DropDownDatas)

This will display the drop down on the page using the property from the viewmodel that contains the list of SelectListItemsWithAttributes.

I constructed this solution from various solutions that I found on the internet, so it wasn't all original to me, but I put it together into something that worked for me.

Hope this will help you solve your issue.