How to add custom object to DropDownList Items?

Question

I'm using DropDownList within my WebApplication. I need to keep additional piece of information with each Item on list. How can I achieve this?

Answer 1

In HTML a drop down is represented by the <select> element which is a collection of <option>. Each option has a value and text. That's all. So keep the additional information in your data store and use the value of the selected element to query it when needed.

Answer 2

How about using your own custom attributes on each of the list items, for example:

<option value="1" data-RecordID="foo">Value 1</option>
<option value="2" data-RecordID="bar">Value 2</option>

Here's a link on how custom attributes will also validate if that is a concern:

HTML 5 data- Attributes

I should also add that the link I included talks about how "data=" attributes are valid XHTML in HTML 5 but there's no reason I can think of to not use them now. You can access them client side using javascript or in .NET server side code using the .Attributes() collection on the .SelectedItem

Answer 3

Make a Custom DropDownList, inheriting from the DropDownList of course. Add another property for the data. The easiest implementation would be to have your new property be a collection of the items you are populating the ddl with. You probably have a class that describes the data you already have, so make the property of that type. You could even set the DataTextValue and DataValueField from this collection after it gets populated and not even have to hook that up in the aspx page.

Answer 4

Other options that make your additional data available client-side could be to use a repeater which is bound to the same data source as your drop down and have it render hidden fields with the additional data, or render a javascript array.