列表元素“值”属性

Question

我有一个使用CSS / Javascript创建的自定义样式下拉选择框，用于模仿<select>元素。该框是<div>，内部列表由<li>个元素组成，它们反映了标准选择框的<option>元素。

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

使用我的自定义框，<li>元素内的文本节点将镜像<option>元素中的内部文本节点。但是我应该如何反映“价值”属性呢？根据{{​​3}}（不是最好的资源，我知道），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>

通过这种方式，您可以在以后轻松访问每个选项的值。

Answer 2

每当您需要在元素上存储任意数据时，您应该使用HTML5 data-*属性：

<li data-value="something">Some text</li>

---

旁注：

  

该框是<div>，内部列表由<li>元素组成

我希望您有ul（或ol或menu）元素作为li元素的父元素！

Answer 3

“但可以使用什么CSS属性”没有CSS属性，因为只有HTML属性。

要在任何元素上存储任何数据，您可以使用data-* - 属性，例如<li data-value="some value">。

Answer 4

根据HTML5标准，您应该使用数据 - * 属性

<li data-value="value">Text here</li>