0

ドロップダウンリストに、次のように整理されたデータツリーがあります（ただし、さらに多くのオプションがあります）。

 pizza
   pizza.mediterranean
   pizza.veggie
   pizza.meatlover
 drinks
   drinks.soda
     drinks.soda.pepsi
     drinks.soda.coke
   drinks.beer
   drinks.water

より大きなカテゴリ (ピザ、ドリンク) を optgroup として表示したいのですが、ドロップダウン リストのオプションとして optgroup を選択できるようにしたいと考えています。私が複数の場所を読んだことは、optgroups はグループ化のみを目的としており、選択できないということです。

また、ドロップダウンが上記の例にできるだけ近く見えるように、複数レベルのインデントが必要なので、おそらく optgroups は進むべき道ではなく、むしろ css ソリューションです。Firefoxでは、オプションにスタイルを追加して太字にしたり、左パディングを付けたりすることで、やりたいことができますが、Webkitでは、ドロップダウンのオプションで変更できる唯一の属性は色です。

optgroups、css、またはその他を使用して、Webkit（chrome / safari）およびfirefoxでこの効果を達成する方法を知っている人はいますか？

4

2 に答える 2

1

要素の代わりに一連のラジオ ボタン (複数の選択肢が許可されている場合はチェックボックス) を使用するselectと、インデントや太字など、他のコンテンツと同じように整理してスタイルを設定できます。ただし、ドロップダウン メニューとしては機能しませんが、実際には使いやすさとアクセシビリティが向上する可能性があります。

于 2012-07-14T06:28:25.293 に答える
1

ローテクになりたいだけかもしれません。

<select>
<option>Root</option>
<option>&nbsp;&nbsp;Second level</option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;Third level</option>
</select>

実際の選択でできることの限界に達しています。概念的には、これらの選択ウィジェットは OS によって描画されるため (一部のブラウザー (firefox) には独自の実装があります)、スタイリング オプションは制限されます。

多くの素敵な選択の代替品があります。私が最もよく知っているのは jqueryui のautocompleteです。高速で柔軟性があり、オプションを好きなようにスタイルできます。jquery や別のツールキット、または単純な JavaScript を使用して、他の自家製のソリューションを想像することができます。

于 2012-07-13T21:15:05.067 に答える