1

<select>要素を模倣することを目的とした、CSS/Javascript で作成されたカスタム スタイルのドロップダウン選択ボックスがあります。このボックスは、標準の選択ボックス の要素を反映した要素で<div>構成される内部リストを持つです。<li><option>

現在、標準の select<option>要素には 2 つの重要なコンポーネントがあります。ドロップダウンで画面に実際に表示される内部テキスト ノードとvalue、選択の値を示す文字列である属性 (フォームの送信または送信で使用するため) です。ジャバスクリプト）。

私のカスタム ボックスでは、要素内の<li>テキスト ノードは、要素内の内部テキスト ノードをミラーリングします<option>。しかし、「値」属性をどのようにミラーリングすればよいでしょうか? w3schools (私が知っている最高のリソースではありません)によると、LI 要素には使用できる「値」属性がありますが、CSS スタイリングを支持して非推奨になっています。しかし、リスト要素の「値」を示すために使用できる CSS 属性は何ですか? または、値を 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、または) 要素があることを願っています!menuli

于 2012-06-20T13:49:54.767 に答える
0

「しかし、どのCSS属性を使用できますか」HTML属性しかないため、CSS属性はありません。

任意の要素に任意のデータを保存するには、data-*-attributes などを使用できます<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 に答える