Webmaster forum - Select elements and Optgroup

Author

Select elements and Optgroup

Dylan Parry

2006-11-05, 11:46 pm

Hi folks,

I have a particularly complicated select element, that contains several
option groups, each of which contain up to 20 options. I've though hard
about this problem, and it wouldn't make sense (semantically) to break
up the select element into several selects, as the option elements all
share a theme, that I can hopefully demonstrate now...

A short example would look like:

<select name="onscode">
<optgroup label="London Boroughs">
<option value="00AB">Barking and Dagenham</option>
<option value="00AC">Barnet</option>
<option value="00AD">Bexley</option>
<option value="00AE">Brent</option>
<option value="00AF">Bromley</option>
[...]
</optgroup>
[...]
</select>

The option elements are the names of every local authority in the UK
matched up with their respective Office of National Statistics code -
the idea being that I can easily locate the name of the client authority
within the select element and the code is then chosen for me. The option
groups split the options down into categories such as "London Boroughs",
"Greater Manchester Districts", "Welsh Authorities" and so on. All in
all, there are around 470 authorities listed, which imho is too many.

What I am tying to do it come up with some way of making it easier to
use. Life is a bit easier, in that I *know* that anyone using this form
will have scripting enabled (it's part of a client-accessed CMS, part of
the requirement for which is scripting enabled), so in that sense I
could probably do with a way of "filtering" the select element so that
only certain option groups are shown.

The problem is that I can't seem to find a way of hiding/showing the
relevant option groups in IE (7 at least, not bothered about 6 for the
same reason as above) --- it doesn't appear to pay attention to the CSS
display attribute.

Any ideas or suggestions? Would it perhaps be better to split the select
element into a few different ones (eg. one containing metropolitan
authorities, one for unitary authorities, another for
county-administered authorities, and so on) and then filter based on
those subsets?

:s

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

David Hennessy

2006-11-05, 11:46 pm

Dylan Parry wrote:
> Hi folks,
>
> I have a particularly complicated select element, that contains several
> option groups, each of which contain up to 20 options. I've though hard
> about this problem, and it wouldn't make sense (semantically) to break
> up the select element into several selects, as the option elements all
> share a theme, that I can hopefully demonstrate now...
>
> A short example would look like:
>
> <select name="onscode">
> <optgroup label="London Boroughs">
> <option value="00AB">Barking and Dagenham</option>
> <option value="00AC">Barnet</option>
> <option value="00AD">Bexley</option>
> <option value="00AE">Brent</option>
> <option value="00AF">Bromley</option>
> [...]
> </optgroup>
> [...]
> </select>
>
> The option elements are the names of every local authority in the UK
> matched up with their respective Office of National Statistics code -
> the idea being that I can easily locate the name of the client authority
> within the select element and the code is then chosen for me. The option
> groups split the options down into categories such as "London Boroughs",
> "Greater Manchester Districts", "Welsh Authorities" and so on. All in
> all, there are around 470 authorities listed, which imho is too many.
>
> What I am tying to do it come up with some way of making it easier to
> use. Life is a bit easier, in that I *know* that anyone using this form
> will have scripting enabled (it's part of a client-accessed CMS, part of
> the requirement for which is scripting enabled), so in that sense I
> could probably do with a way of "filtering" the select element so that
> only certain option groups are shown.
>
> The problem is that I can't seem to find a way of hiding/showing the
> relevant option groups in IE (7 at least, not bothered about 6 for the
> same reason as above) --- it doesn't appear to pay attention to the CSS
> display attribute.
>
> Any ideas or suggestions? Would it perhaps be better to split the select
> element into a few different ones (eg. one containing metropolitan
> authorities, one for unitary authorities, another for
> county-administered authorities, and so on) and then filter based on
> those subsets?
>
> :s
>

You could use classes in the option tag -- a different class per each
optgroup -- to achieve the same affect. Are the option lists
dynamically-generated?

--
David J. Hennessy
http://maidix.com/
http://davidhennessy.net/

Dylan Parry

2006-11-05, 11:46 pm

David Hennessy wrote:

> You could use classes in the option tag -- a different class per each
> optgroup -- to achieve the same affect. Are the option lists
> dynamically-generated?

No, but it's a simple matter to add classes by hand if necessary. How
would you get around the fact that IE will still show the option labels?
I suppose you could simply accept it as a quirk of the browser, but it
simply doesn't /look/ nice.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

David Hennessy

2006-11-05, 11:46 pm

Dylan Parry wrote:
> David Hennessy wrote:
>
>
> No, but it's a simple matter to add classes by hand if necessary. How
> would you get around the fact that IE will still show the option labels?
> I suppose you could simply accept it as a quirk of the browser, but it
> simply doesn't /look/ nice.
>

I think using a class for the optgroups, rather than applying CSS to the
optgroup tag itself, will get around that limitation.

If that doesn't work (and this is a shot in the dark), I've sometimes
found that similar quarks could be overcome by using the style parameter
in the tag, rather than using a CSS class (for that tag).

--
David J. Hennessy
http://maidix.com/
http://davidhennessy.net/

Dylan Parry

2006-11-05, 11:46 pm

David Hennessy wrote:

> I think using a class for the optgroups, rather than applying CSS to the
> optgroup tag itself, will get around that limitation.

Doesn't appear to help. I find it strange that IE7 ignores "display" in
the CSS for any of the children of a select element. I suppose it's the
same problem as form elements being drawn on top of floated elements, in
that they are part of the OS rather than the browser...

> If that doesn't work (and this is a shot in the dark), I've sometimes
> found that similar quarks could be overcome by using the style parameter
> in the tag, rather than using a CSS class (for that tag).

No luck there either. I might actually script it through adding and
removing the nodes in the DOM. At least that way there won't physically
be anything for IE to display!

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.