Question

I have a custom styled drop-down selection box created with CSS/Javascript, which is meant to imitate a <select> element. The box is a <div> with an internal list composed of <li> elements, which mirror the <option> elements of a standard select box.

Now, a standard select <option> element has two important components: the internal text node, which is what is actually displayed onscreen in the drop-down, and a value attribute which is the string that indicates the value of the selection (for use with form submissions or Javascript).

With my custom box, the text node inside the <li> element mirrors the internal text node in an <option> element. But how should I mirror the “value” attribute? According to w3schools (not the best resource, I know), the LI element has a “value” attribute which can be used, but it is deprecated in favor of CSS styling. But what CSS attribute can be used to indicate the “value” of the List Element? Or is there some better way to associate a value with an LI element?

Answer 1

Any attribute starting with “data-” is valid html nowadays. So you could do something like:

<ul>
    <li data-value="1">Option #1</li>
    <li data-value="754">Option #2</li>
</ul>

That way you could easily access your value for each option at a later stage.