列表元素“值"属性 [英] List Element "value" attribute
问题描述
我有一个使用 CSS/Javascript 创建的自定义样式的下拉选择框，旨在模仿 元素.该框是一个
现在，一个标准的 select 元素有两个重要的组成部分:内部文本节点，它是实际显示在屏幕上下拉列表中的内容，以及一个 value 属性，它是指示选择值的字符串(用于表单提交或 Javascript).
对于我的自定义框， 元素中的文本节点反映了 元素中的内部文本节点.但是我应该如何反映价值"属性?根据 w3schools(我知道不是最好的资源)，LI 元素有一个"value" 属性可以使用，但不推荐使用它以支持 CSS 样式.但是什么 CSS 属性可以用来表示 List 元素的值"呢?或者有什么更好的方法可以将值与 LI 元素相关联?
现在任何以data-"开头的属性都是有效的 html.所以你可以这样做:
<li data-value="1">选项#1</li><li data-value="754">选项#2</li>
这样您就可以在以后轻松访问每个选项的价值.
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?
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.
这篇关于列表元素“值"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
