1

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

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

使用我的自定义框，元素内的<li>文本节点反映了元素中的内部文本节点<option>。但是我应该如何反映“价值”属性？根据w3schools（不是最好的资源，我知道），LI 元素有一个可以使用的“值”属性，但它已被弃用以支持 CSS 样式。但是什么 CSS 属性可以用来表示 List 元素的“值”呢？或者有没有更好的方法将值与 LI 元素相关联？

4

4 回答 4

2

如今，任何以“data-”开头的属性都是有效的 html。因此，您可以执行以下操作：

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

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

于 2012-06-20T13:50:41.737 回答
0

data-*任何时候需要在元素上存储任意数据时都应该使用 HTML5属性：

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

边注：

盒子是一个由元素<div>组成的内部列表<li>

我希望你有一个ul（或ol，或menu）元素作为这些元素的父li元素！

于 2012-06-20T13:49:54.767 回答
0

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

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

于 2012-06-20T13:50:01.487 回答
0

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

<li data-value="value">Text here</li>
于 2012-06-20T13:50:05.203 回答