How to use object properties in dropdownlistfor option tooltips?

Question

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>

But what are "property2" and "property3" ? The second parameter in new SelectList() is the value of the <option> and the third is the text... — Didier Ghys
– Didier Ghys, Commented Dec 21, 2011 at 13:28
I'm sorry for not providing that information. Model.ListWithObjects consists of objects with three (string) properties: Property1, 2 and 3. So the dropdownlist displays the string value of property 1, where I want to use the 2 remaining properties in the tooltip. — Paul
– Paul, Commented Dec 21, 2011 at 13:40
using a var ought to work... I can do something like var Property2 = '@Model.ListWithObjects[0].Property2', I am not able to replace the 0 with an index of sorts (like: var index = $(this).index();) though... any thoughts? — Paul
– Paul, Commented Dec 21, 2011 at 15:15
Well, you can't access Model.ListWithObjects from client-side (javascript). You have to somehow output the data within the html. Best place would be to add some data attributes on <option> but the Html.DropDownList helper does not allow to customize the output for the <option> — Didier Ghys
– Didier Ghys, Commented Dec 21, 2011 at 16:07

Community · Accepted Answer · 2017-05-23 12:27:39Z

3

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

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Dec 21, 2011 at 17:04

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

Thank you for this, I was wondering whether a jquery solution would be possible (also for educational purposes ;)). I had already moved to a foreach loop to at least gain the aspired functionality. I have added a snippet in the original post for completeness.

Collectives™ on Stack Overflow

How to use object properties in dropdownlistfor option tooltips?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related