CODEWITHSUNDEEP
c#jqueryasp.net-mvc-3
Paul
Paul

Reputation: 33

How to use object properties in dropdownlistfor option tooltips?

After an extensive unsuccessful search I hope you guys can help me out here...

What I know: it is possible to generate tooltips for dropdownlist options through

<script type="text/javascript">
    $(function () {
       $("#someDropDownForList option").each(function () {            
       $(this).attr({ 'title': $(this).html() });
       });
    });
</script>

However, in my case I want to provide the users with more information on the options

<html>    
   <body>
      <div>
      @Html.DropDownListFor(
      m => m.SomeModelProperty,
      new selectList(Model.ListWithObjects, "Property1", "Property1"),
      new { @id="someDropDownForList"})
      </div>
   </body>
</html>

How can I use jquery to use Property2 and Property3 to construct a tooltip text for each option?

Property1 + " has: " + Property2 + " and " Property3

With kind regards,

Paul

EDIT: a solution without jquery

<div>
   <select id="someDropDownForList ">
   @foreach(var item in Model.ListWithObjects)
   {
   <option title="Some property is the @item.Property2: with the @item.Property3">
       @item.Property1
   </option>        
   }        
   </select>
</div>

Upvotes: 3

Views: 2028

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

The provided helper Html.DropDownListFor allows only binding the <option> text and value through the IEnumerable<SelectListItem> selectList parameter (as you are doing).

The thing is that you can't access the other properties in your model from client-side javascript. Javascript does not know about your C# objects.

I think the proper way would be to generate the following HTML:

<select>
    <option value="ValueProperty1" title="Property1 has: Property2 and Property3">TextProperty1</option>
    ...
</select>

You won't even need any jquery.

How to achieve this ? I think you're better off implementing a solid solution by extending the SelectListItem and create a new helper method to generate the DropDownList.

The following answer does exactly this: Adding html class tag under in Html.DropDownList

Upvotes: 3

Related Questions