Is there a LB_SETITEMDATA equivalent for an HTML drop-down list?

Question

In the Windows SDK there was a method to add extra (hidden) data to each listbox item, LB_SETITEMDATA. It was very useful, ie you could associate an index number with the item.

Using HTML's drop-down list and JavaScript, I was hoping there might be a similar feature.

Answer 1

In HTML5, there is a feature called data attributes, that allows you to add extra data to an HTML component.

They are not completely hidden though since the user could inspect your page and see those values there. So I wouldn't recommend using any sensitive information there.

That said, they are visually hidden in the webpage, so is still very useful. Here is an example (note you can see the data on the code, but not on the rendered result):

 <p>Fruits:</p> <select> <option data-color="red">Apple</option> <option data-color="yellow">Banana</option> </select>

Reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes