html - 選択入力で階層データを表す方法は?

Question

私はそれを生成する方法を尋ねているのではなく、それをフォーマットする方法を尋ねています。その目的のために意図された文字のセットはありますか? 私の直感的なアプローチは、次の値を持つオプションを用意することでした。

master
    |-- foo 1
    |-- foo 2
        |-- bar 1

Answer 1

select 要素でそれを行いたいが、2 つ以上のレベルは必要ない場合は、 を使用できますoptgroup。

CSS スタイルは制限されています。私の知る限り、それ自体については、、、、、、などを変更selectできます。colorbackgroundborderfonttext-align

optgroupとについてoptionは、変更できます... まあ、同じことです。を使用して、選択したオプションのスタイルを変えることもできます[selected] {/*styles*/}。padding変更することはできませんmargin。また、 s をネストしようとしてoptgroupも機能しません。

できること: 異なるoptgroupと を異なるスタイルにすることができますoption(クラス、nth-child、属性セレクターを使用)。

デモ

多くのレベルが必要な場合は、ネストされたリストを使用する方がよいでしょう。

<ul>
    <li>master
        <ul>
            <li>foo 1</li>
            <li>foo 2
                <ul>
                    <li>bar 1</li>
                </ul>
            </li>    
        </ul>
    </li>
</ul>

Answer 2

ボックス描画文字は、多かれ少なかれ、このような目的のためのものです。少なくとも、U+251Cボックス図面ライト垂直および右「├」およびU+2500ボックス図面ライト水平「─」を使用します。例えば、

<select>
<option>master
<option>&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; foo 1
<option>&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; foo 2
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; bar 1
</select>

ただし、シンボルを適切に位置合わせすることは困難です。上記のようにノーブレークスペースを使用するのは大雑把なツールであり、最も重要なのは、文字の幅が異なるため、次のようなCSSルールの使用を検討することです。

 select, option { font-family: Consolas, monospace }

より予測可能なレンダリングを取得します。

Answer 3

selectリストを操作するためにjavascriptまたはjQueryを使用したい場合は、ここに私の解決策があります

<select name="hierarchies">
<option class="level_1">Computer Science</option>
   <option class="level_2">Java</option>
      <option class="level_3">Martin Fowler</option>
      <option class="level_3">Ian Galloway</option>
<option class="level_1">Computer Engr</option>
   <option class="level_2">C#</option>
      <option class="level_3">John Skeet</option>
      <option class="level_3">Phil Haack</option>
      <option class="level_3">Marc Garvel</option>
<option class="level_1">C</option>
</select>

次に、jQuery または JavaScript を使用して、レベルに基づいてコンテンツを再フォーマットします

$(document).ready(
 function(){

   $('.level_2').each(
        function(){
            $(this).text('------'+$(this).text());
        }
   );

   $('.level_3').each(
        function(){
            $(this).text('---------'+$(this).text());
        }
   );

  }
);

結果画面