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

Inside the controller action that is supposed to receive the form submit you could use the id of the selected value to query your database in order to fetch the long display name and do whatever you was intending to do with it.

The DropDownListFor helper doesn't support adding HTML5 data-* attributes to the options but even if it did they will not be sent as part of a standard form submission. You will have to use javascript to send them to the server using another technique (hidden fields, AJAX, query string parameters, ...).

But if form some reason you need additional attributes on the option tag you could always write a custom helper.

Answer 2

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<string, string> 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<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, IEnumerable<SelectListItemWithAttributes> selectList) {
    string name = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)); 

    var selectDoc = XDocument.Parse(htmlHelper.DropDownList(name, (IEnumerable<SelectListItem>)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<SelectListItemWithAttributes> pDropDownDatas = null;
public List<SelectListItemWithAttributes> 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<string, string> { { "data-callback", c.RequiresCallback.ToString().ToLower() } } } ).ToList()
            ;

        DropDownDataItems.Insert(0, new SelectListItemWithAttributes() { Text = "-- Select --", Value = "", HtmlAttributes = new Dictionary<string, string> { { "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.

Answer 3

Everyone forgets the "classic" way to solve these problems: use a foreach loop and actually write the input html. Only downside is you have to add the automatic attribute stuff (like validation, etc), which depending on your purpose may not be a big deal.

Something like:

<select> // add other attributes as expected
@foreach(var type in Model.MyFancyTypes) {
<option value="@type.SubTypeID" data-description="@type.Description" 
    @if(ViewBag.TypeSelected == type.SubTypeID) {
        selected="selected"
    }>@type.Name</option>
}
</select>