mvc dropdown option with title tag in mvc

Question

<select id="priority">
    <option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" title="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" title="icons/icon_faq.gif">FAQ</option>
    <option value="games" title="icons/icon_games.gif">Games</option>
</select>

I want this type of drop down in mvc with title attribute

 @Html.DropDownListFor(model => model.priority, new SelectList(ViewBag.Priority, "Value", "Text"), "-- Select Priority --", new { @class = "required" })

Answer 1

The built-in DropDownList helper doesn't allow you for setting additional HTML attributes on individual options such as title. You will have to write your own custom helper if you want to achieve that. Here's one same implementation you may take a look at adapt to your needs.

Answer 2

@Html.DropDownListFor(model => model.priority, new SelectList(ViewBag.Priority, "Value", "Text"), "-- Select Priority --", new { @class = "required", title="priority" })

Answer 3

Probably you can achieve your desired output by 1.create a custom helper with with extension method which will return MvcHtmlString which will create your custom HTML for dropdown and call that method in your view.

Like Below

public static class CustomDropdown
{
public static string Dropdown(Priority priority)
      {       
           StringBuilder sb=new StringBuilder ();
           sb+="<Select id='drop'>";
           for(int i=0;i<priority.name.length;i++)
       {
           sb+="<option id='dropop' value='"+priority.value[i]+"'                      title='"+priority.title[i]+"'>"+priority.name[i]+"</option>";
       }
        sb+="</select>";
              return Convert.ToString(sb);                   
      }
   }
 }

2.Bind the options of the given select with help of jquery like

  var i=0;
$('.drpclass option').each(function(){
$(this).attr('title',Model.priority.title[i])
i++;
});