html - 列表元素 "value"属性

Question

我有一个使用 CSS/Javascript 创建的自定义样式的下拉选择框，旨在模仿 <select>元素。盒子是<div>内部列表由 <li> 组成元素，它反射(reflect)了 <option>标准选择框的元素。

现在，标准选择 <option>元素有两个重要的组成部分:内部文本节点，它是下拉菜单中实际显示在屏幕上的内容，以及 value。属性，它是指示选择值的字符串(用于表单提交或 Javascript)。

使用我的自定义框，<li> 中的文本节点元素镜像 <option> 中的内部文本节点元素。但是我应该如何镜像“值”属性呢？根据w3schools (这不是最好的资源，我知道)，LI 元素有一个可以使用的“value”属性，但不赞成使用 CSS 样式。但是什么CSS属性可以用来表示List Element的“值”呢？或者是否有更好的方法将值与 LI 元素相关联？

Answer 1

如今，任何以“data-”开头的属性都是有效的 html。所以你可以这样做:

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

这样您就可以在稍后阶段轻松访问每个选项的值。