Select. Hierarchy.

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

shapper wrote:

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?

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.

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

Joshua Cranmer schrieb:

shapper wrote:
I
will have three levels.

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

optgroup-option is only two-level.

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

Johannes Koch wrote:

Joshua Cranmer schrieb:
shapper wrote:
I
will have three levels.

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

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>


--
Take care,

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

On Jun 23, 3:44*pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

Johannes Koch wrote:
Joshua Cranmer schrieb:
shapper wrote:
I
will have three levels.

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

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

--
Take care,

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

On Jun 23, 3:44*pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

Johannes Koch wrote:
Joshua Cranmer schrieb:
shapper wrote:
I
will have three levels.

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

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

--
Take care,

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