2012-01-24 6 views
1

Internet ExplorerではなくFirefox、Opera、Chromeのみをターゲットにしており、最新のブラウザ(過去1年以内にリリースされたもの)をターゲットにしているのであれば、複数レベルのインデントを作成するにはどうすればよいですか? optgroupsを使わずに選択しますか?つまり、子オプションだけでなく、親オプションも選択できるようにしたいのですか?<select>でインデントを作成する最も現代的な方法は?

<select> 
    <option> 
    <option> 
     <option> 
     <option> 
     <option> 
    <option> 
     <option> 
     <option> 
      <option> 
      <option> 
      <option> 
     <option> 
     <option> 
    <option> 
    <option> 
</select> 

それはまだ実際に可能だ場合、私はオプションのレベル間の実際の親/子関係を持つように、知らないけれども、それがない場合は、それがどのように見える作りの少なくとも方法が好ましいであろう3つのブラウザ間でユーザーエクスペリエンスが似ているのはどこですか?

+2

ここでの同様の問題は、すでにここに尋ねています:http://stackoverflow.com/q/1146789/575527 – Joseph

答えて

6

テキストの先頭に、それぞれ適切な量の&nbsp;(文字コード160)を付けます。

+0

はい、そのハックは、HTML2やHTML3からどうやってやらなければならないのか、前述の2009年問題http://stackoverflow.com/q/1146789/575527と同じです。 IE6/IE7/IE8/Firefox2/Netscape Navigator /などをサポートしようとするのをやめたときに、もっと最近では、人々がそれをやり遂げるために見つけた代替/非ハッキリーな方法です。 – BrianFreud

+2

私はそれでも '  'を使用してください。その横には、htmlで独自のドロップダウンを構築することができます。 – timing

+0

@ブライアン:ありません。これは基本的なHTMLコントロールには実装されていないので、バニラのドロップダウンは1999年と同じように動作します。 – Tomalak

3

特殊文字を追加することは確かに効果的ですが、それは面倒です。

別の意味論的な代替手段は、<optgroup>を使用することです。ここでの明らかな制限は、それらを互いに入れ子にすることができないということです。そのため、単純な1レベルのグループに限定されています。

あなたはいくぶんあなたOPTGROUPは、このように命名して創造的であることによって、この制限を克服することができます

<select> 
    <optgroup label="Favorite Food"> 
    <option value="salad">Salad</option> 
    <option value="pizza">Pizza</option> 
    </optgroup> 
    <optgroup label="Favorite Food &gt; Pizza Type"> 
    <option value="pepperoni">Pepperoni</option> 
    <option value="cheese">Cheese</option> 
    </optgroup> 
</select> 
関連する問題