Question

So I’m trying to populate a HTML dropdown using Javascript/Jquery. I’d like each <option> tag to have some data associated with it, stuff like searchPurpose, searchTime, startDate, endDate. I then have two questions-

1. How should I associate that data – through data tags, or through something else?
2. How do I access that data once my user has clicked on a certain option?

Thanks

Answer 1

With HTML5, data-* attributes are definitely the way to go. Suppose you have the following:

<select id="ddl">
  <option data-start-date="25-08-2012" value="1">A</option>
  <option data-start-date="25-08-2013" value="1">B</option>
</select>

To access their value with plain JavaScript use:

selectedOption.getAttribute("data-start-date");

With jQuery use data():

$("#ddl").on('change', function () {
  var selectedOption = this.options[this.selectedIndex];
  alert($(selectedOption).data("start-date"));
});

DEMO.
DEMO (jQuery).