473,320 Members | 1,832 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Looking for Solutions for Hierarchical Selection

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
Jul 20 '05 #1
4 3855
Jamie Jackson <mc*************************@hotmail.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
Jul 20 '05 #2
On 16 Jun 2004 10:18:22 +0100, Chris Morris <c.********@durham.ac.uk>
wrote:
Jamie Jackson <mc*************************@hotmail.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

Jul 20 '05 #3
Jamie Jackson <mc*************************@hotmail.com> writes:
On 16 Jun 2004 10:18:22 +0100, Chris Morris <c.********@durham.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><legend>Whatever DOJ stands for</legend>

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

<fieldset><legend>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><legend>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
Jul 20 '05 #4
On 16 Jun 2004 17:14:21 +0100, Chris Morris <c.********@durham.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><legend>Whatever DOJ stands for</legend>

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

<fieldset><legend>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><legend>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
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Reimar Bauer | last post by:
Hi all, I would like to use a hierarchical group oriented encryption. Is there something implemented or did you know something I could use? For explanaition. If you have a large building...
1
by: ALEX KLEIN | last post by:
I want to use fabricated hierarchical recordset in VB6 using ADO. I wrote code like dim rs as adodb.recordest set rs=new adodb.recordest rs.fields.append "a1",adChar,30 Then in loop I put...
6
by: Bob Alston | last post by:
I am looking for Access reporting add-in that would be easy to use by end users. My key focus is on selection criteria. I am very happy with the Access report writer capabilities. As far as...
30
by: Vadim Tropashko | last post by:
Reposting with more clarification (as Jan asked). Suppose I have a BNFgrammar and a source text parsed into a tree. How would I query an identifier declaration? All the XQuery tutorials...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.