Select. Hierarchy.

[shapper]

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

[Joshua Cranmer]

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

[Johannes Koch]

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

[Jonathan N. Little]

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

[shapper]

On Jun 23, 3:44*pm, "Jonathan N. Little" <[e-mail]:

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

[shapper]

On Jun 23, 3:44*pm, "Jonathan N. Little" <[e-mail]:

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