CODEWITHSUNDEEP
htmlcss
Gajus
Gajus

Reputation: 73728

How to represent hierarchical data in select input?

I am not asking how to generate it, but rather how to format it. Is there any set of characters that is meant for that purpose? My intuitive approach was to have the options with the following values:

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

Upvotes: 3

Views: 7690

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

The box drawing characters are meant for purposes like this, more or less. At the minimum, you would use U+251C BOX DRAWINGS LIGHT VERTICAL AND RIGHT “├” and U+2500 BOX DRAWINGS LIGHT HORIZONTAL“─”. For example,

<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>

However, it will be difficult to get the symbols aligned well. Using no-break spaces as above is a coarse tool, and most importantly, character widths vary—so you might consider using a CSS rule like

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

to get more predictable rendering.

Upvotes: 4

Ana
Ana

Reputation: 37169

If you want to do it with a select element and you don't need more than two levels, then you could use optgroup.

CSS styling is limited. As far as I know, for the select itself you can change things like color, background, border, font, text-align.

For optgroup and option, you can change... well, the same things. You can also style the selected option differently using [selected] {/*styles*/}. You cannot change padding or margin... things like that. And trying to nest optgroups doesn't work either.

What you can do: you can style different optgroups and options differently (using classes, nth-child, a attribute selectors).

Demo

If you need a lot of levels, then perhaps it would be better to use nested lists.

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

Upvotes: 5

codingbiz
codingbiz

Reputation: 26376

In case you want to use javascript or jQuery to manipulate the select list here is my solution

<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>

then use jQuery or JavaScript to reformat the content based on the level

$(document).ready(
 function(){

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

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

  }
);

Resulting screen

enter image description here

Upvotes: 3

Related Questions