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:

Quote:

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:

Quote:

shapper wrote:

Quote:

>I
>will have three levels.

Quote:

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:

Quote:

Joshua Cranmer schrieb:

Quote:

>shapper wrote:

Quote:

>>I
>>will have three levels.

>

Quote:

>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...@central.netwrote:

Quote:

Johannes Koch wrote:

Quote:

Joshua Cranmer schrieb:

Quote:

shapper wrote:
>I
>will have three levels.

>

Quote:

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

>

Quote:

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...@central.netwrote:

Quote:

Johannes Koch wrote:

Quote:

Joshua Cranmer schrieb:

Quote:

shapper wrote:
>I
>will have three levels.

>

Quote:

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

>

Quote:

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

Select. Hierarchy.

re: Select. Hierarchy.

re: Select. Hierarchy.

re: Select. Hierarchy.

re: Select. Hierarchy.

re: Select. Hierarchy.

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about