Looking for Solutions for Hierarchical Selection

[Jamie Jackson]

I'd like to make a hierarchical select box: However, requirements are
only children (that have no children themselves) are selectable.

So here's a snip of what the select box's options might look like:

US Department of Education
-Office of Safe and Drug Free Schools
US Department of Health and Human Services
-Substance Abuse and Mental Health Services Administration
--Center for Substance Abuse Prevention
--Center for Substance Abuse Treatment
--Center for Mental Health Services
--Office of Policy and Coordination, Planning and Budget
-Centers for Disease Control and Prevention
-Administration for Children and Families
--Family and Youth Services Bureau
-National Institutes of Health
--National Institute on Drug Abuse
---Office of the Assistant Secretary for Planning and Evaluation
<snip/>

I took a look at <option>'s "disable" attribute, which would be
perfect. Unfortunately, it seems almost wholly unsupported.

Other options are:
* controlling what is selectable using JavaScript. The problem is
that while I can use JS, I _cannot rely on it_ so I would have to
back this up with server-side validation. Problem is it might be
awkward to explain to a non-JS user what's selectable and what's not.
* Break the interface into (potentially) three different pages (one
for each level), and have a select box on each page.
* Make the whole thing a radio button list, and just display the
giant hierarchy in the form (uggh)

Elegant solutions, anybody?

Thanks,
Jamie

[Chris Morris]

Jamie Jackson <mc************ *************@h otmail.com> writes:

I'd like to make a hierarchical select box: However, requirements are
only children (that have no children themselves) are selectable.

So here's a snip of what the select box's options might look like:

US Department of Education
-Office of Safe and Drug Free Schools
US Department of Health and Human Services
-Substance Abuse and Mental Health Services Administration
--Center for Substance Abuse Prevention
<snip/>

I took a look at <option>'s "disable" attribute, which would be
perfect. Unfortunately, it seems almost wholly unsupported.

Other options are:
* Break the interface into (potentially) three different pages (one
for each level), and have a select box on each page.
Or have three radio buttons, each of which has a select box next to
it. That could be confusing for users, though.
* Make the whole thing a radio button list, and just display the
giant hierarchy in the form (uggh)
This might not be so bad, unless it's a really long radio button
list. It's not as if the form needs to be fitted into a small space,
is it?
Elegant solutions, anybody?

<optgroup> if you only have one level. Never needed it myself so you'd
have to check browser support, but it does have a way to give graceful
fallback. But from the example it looks like you have more than one level.

--
Chris

[Jamie Jackson]

On 16 Jun 2004 10:18:22 +0100, Chris Morris <c.********@dur ham.ac.uk>
wrote:

Jamie Jackson <mc************ *************@h otmail.com> writes:

I'd like to make a hierarchical select box: However, requirements are
only children (that have no children themselves) are selectable.

So here's a snip of what the select box's options might look like:

US Department of Education
-Office of Safe and Drug Free Schools
US Department of Health and Human Services
-Substance Abuse and Mental Health Services Administration
--Center for Substance Abuse Prevention
<snip/>

I took a look at <option>'s "disable" attribute, which would be
perfect. Unfortunately, it seems almost wholly unsupported.

Other options are:
* Break the interface into (potentially) three different pages (one
for each level), and have a select box on each page.

Or have three radio buttons, each of which has a select box next to
it. That could be confusing for users, though.

* Make the whole thing a radio button list, and just display the
giant hierarchy in the form (uggh)

This might not be so bad, unless it's a really long radio button
list. It's not as if the form needs to be fitted into a small space,
is it?

Elegant solutions, anybody?

<optgroup> if you only have one level. Never needed it myself so you'd
have to check browser support, but it does have a way to give graceful
fallback. But from the example it looks like you have more than one level.

Thanks for the optgroup tip: I gave it a shot and it worked pretty
well in most browsers. I think we're going to end up going with kind
of a flat, acronym-based hierarchy, though (decent looking and
simple):

<select name="thing">
<option>ED: OSDFS</option>

<option>HHS: SAMHSA: CSAP</option>
<option>HHS: SAMHSA: CSAT</option>
<option>HHS: SAMHSA: CMHS</option>
<option>HHS: SAMHSA: OA: OPC</option>
<option>HHS: CDC</option>
<option>HHS: ACF: ACYF: FYSB </option>
<option>HHS: NIH: NIDA</option>
<option>HHS: OS: OASPE</option>

<option>HUD: CPD: SNAPS</option>

<option>DOJ: OJP: OBMS</option>
<option>DOJ: OJP: BJA</option>
<option>DOJ: OJJDP: OVC: TAPIR</option>
<option>DOJ: OJP: NIJ</option>
<option>DOJ: OJP: CCDO</option>
<option>DOJ: OVW</option>
<option>DOJ: BOP: ISDP</option><!-- ? --->
<option>DOJ: BOP: ORE</option>
<option>DOJ: BOP: NIC</option>
<option>DOJ: BOP: NIC: CC/Prisons Div.</option>
<option>DOJ: COPS</option>
<option>DOJ: USPC</option>

<option>White House: FBCI</option>

<option>VA: Homeless Veterans Program Office</option><!-- ? couldn't
find -->

<option>DOL: ETA: OYS</option>
<option>DOL: ETA: OYS: Div. of Field Svcs. &amp; TA</option>
<option>SSA: DCDISP: Ofc. of Income Sec. Progs.</option>
<option></option>

</select>

Thanks,
Jamie

[Chris Morris]

Jamie Jackson <mc************ *************@h otmail.com> writes:

On 16 Jun 2004 10:18:22 +0100, Chris Morris <c.********@dur ham.ac.uk>
wrote:

<optgroup> if you only have one level. Never needed it myself so you'd
have to check browser support, but it does have a way to give graceful
fallback. But from the example it looks like you have more than one level.
Thanks for the optgroup tip: I gave it a shot and it worked pretty
well in most browsers. I think we're going to end up going with kind
of a flat, acronym-based hierarchy, though (decent looking and
simple):

I take it this is for a form where all the users will be legitimately
expected to understand the acronyms on sight because they work with
them regularly anyway? For any normal person that thing below will be
completely unusable.
<select name="thing"> .... <option>HHS: SAMHSA: OA: OPC</option> .... <option>DOJ: OJJDP: OVC: TAPIR</option>

....

Another idea: what about radio buttons contained in fieldsets?

<fieldset><lege nd>Whatever DOJ stands for</legend>

<fieldset><lege nd>Whatever OJJDP stands for</legend>

<fieldset><lege nd>Whatever OVC stands for</legend>
<label for="c1"><input id="c1" type="radio" name="thing" value="DOJ:
OJJDP: OVC: TAPIR"> TAPIR</label>

<label for="c2"><input id="c2" type="radio" name="thing" value="DOJ:
OJJDP: OVC: Something"> Something else in OVC</label>

</fieldset>
<fieldset><lege nd>Something other than OVC in OJJDP</legend>
...
</fieldset>
...
</fieldset>
....
</fieldset>

Could still be fairly compact, but would also be fairly easy to
use. You might want to play around with CSS borders on the <label>s to
make it visually clearer which radio button goes with which label, and
likewise perhaps on the fieldsets to make the hierarchy clearer.

--
Chris

[Jamie Jackson]

On 16 Jun 2004 17:14:21 +0100, Chris Morris <c.********@dur ham.ac.uk>
wrote:

I take it this is for a form where all the users will be legitimately
expected to understand the acronyms on sight because they work with
them regularly anyway? For any normal person that thing below will be
completely unusable.
Yup, they should be very familiar with these acronyms. However, the
boss just shot down the idea for the very same reason you stated. ;-)
Another idea: what about radio buttons contained in fieldsets?

<fieldset><leg end>Whatever DOJ stands for</legend>

<fieldset><lege nd>Whatever OJJDP stands for</legend>

<fieldset><lege nd>Whatever OVC stands for</legend>
<label for="c1"><input id="c1" type="radio" name="thing" value="DOJ:
OJJDP: OVC: TAPIR"> TAPIR</label>

<label for="c2"><input id="c2" type="radio" name="thing" value="DOJ:
OJJDP: OVC: Something"> Something else in OVC</label>

</fieldset>
<fieldset><lege nd>Something other than OVC in OJJDP</legend>
...
</fieldset>
...
</fieldset>
...
</fieldset>

Could still be fairly compact, but would also be fairly easy to
use. You might want to play around with CSS borders on the <label>s to
make it visually clearer which radio button goes with which label, and
likewise perhaps on the fieldsets to make the hierarchy clearer.

The boss decided she liked an optgroup solution, but we had both
assumed that optgroup could be styled to match the rest of the options
(there are political reasons for this). Since optgroup is pretty much
untouchable WRT css (I've just found out), we may have to consider
something like what you suggested.

Thanks for sticking with this thread. :D

Jamie