Select. Hierarchy.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

shapper - 23 Jun 2008 02:20 GMT

Hello,

I want to display, in a select, a few items but having between
themselves an hierarchy like a tree view.
I want to push a few of them a little bit forward then others ... I
will have three levels.

What is the best way to do this?

Thanks,
Miguel

Reply to this Message

Joshua Cranmer - 23 Jun 2008 02:44 GMT

> Hello,
>
[quoted text clipped - 4 lines]
>
> What is the best way to do this?

I think something like:
<select>
<optgroup label="2008">
<option value="2008Q1">Q1</option>
<option value="2008Q2">Q2</option>
<option value="2008Q3">Q3</option>
<option value="2008Q4">Q4</option>
</optgroup>
<optgroup label="2007">
<option value="2007Q1">Q1</option>
<option value="2007Q2">Q2</option>
<option value="2007Q3">Q3</option>
<option value="2007Q4">Q4</option>
</optgroup>
</select>

should due the trick.

Signature

Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

Reply to this Message

Johannes Koch - 23 Jun 2008 08:34 GMT

Joshua Cranmer schrieb:

>> I
>> will have three levels.

> I think something like:
> <select>
> <optgroup label="2008">
> <option value="2008Q1">Q1</option>

optgroup-option is only two-level.

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

Jonathan N. Little - 23 Jun 2008 15:44 GMT

> Joshua Cranmer schrieb:
>>> I
[quoted text clipped - 6 lines]
>
> optgroup-option is only two-level.

Gecko only...

option { padding: 0; }
option.level1 { padding-left: 1em; }
option.level2 { padding-left: 2em; }
option.level3 { padding-left: 3em; }

<select>
<option class="level0">At level 0</option>
<option class="level0">At level 0</option>
<option class="level1">At level 1</option>
<option class="level2">At level 2</option>
<option class="level2">At level 2</option>
<option class="level3">At level 3</option>
<option class="level1">At level 1</option>
<option class="level1">At level 1</option>
<option class="level0">At level 0</option>
<option class="level1">At level 1</option>
</select>

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

shapper - 23 Jun 2008 15:50 GMT

> > Joshua Cranmer schrieb:
> >>> I
[quoted text clipped - 33 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

I know this is not the best solution but maybe adding one, two,
three, ... non breaking spaces before the value depending on the
level?

I found this in wordpress Category selector. It will work in all
browsers.

Thanks,
Miguel

Reply to this Message

shapper - 23 Jun 2008 16:16 GMT

> > Joshua Cranmer schrieb:
> >>> I
[quoted text clipped - 33 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2008

Select. Hierarchy.