[thelist] HTML: Simluating OPTGROUP in IE 5

Jeff Howden jeff at jeffhowden.com
Sun Mar 30 12:46:59 CST 2003


frank,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Frank
>
> I had originally created two menus: one for countries,
> one for subdivision.  When the user selected a country,
> only the appropriate subdivision showed up in the second
> menu (ie: "United States" only gave 52 states). Using
> Moz, I was able to set the value of the subdivision menu
> to display:none, thus all but the states disappeared.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

The solution is to dynamically recreate the options of the second menu based
on the choices the user makes from the first.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> But this doesn't work in IE, or at least I haven't
> figured out how to do it. Any advice on the matter is
> welcome.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ie gives you very little control over the styling of options, unfortunately.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> Using the OPTGROUP was a last ditch effort at creating
> good one-step UI that's relatively cross-browser,
> otherwise I would spend an eternity figuring the script
> out.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

unfortunately the support for optgroup is lousy at best so i'm afraid that
isn't going to be much use.

a scripted solution with server-side backup isn't really that complicated.

server-side you'll need a structure where each country is a key and the
value is a list of the sub-divisions for that country.  when the user makes
a selection from the country list, give them the form again, but with the
sub-divisions for that country in the sub-division list.  do some simple
validation to make sure that the sub-division sent to the server is found in
the list of sub-divisions for the country they selected.  once you've got
that all working then it's time to implement the client-side portion.

on the client-side, create an associative array of countries where each
country is an index in the array and the value is an array of sub-divisions
for that country.  then, when the user changes the country simply empty the
sub-division select list and repopulate it with the array of sub-divisions
for the country they selected.  make it easy on yourself by using the value
from the selected country option as the associative index in the country
array.  for example:

<option value="us">United States</option>

var country = new Array();
    country['us'] = $array of states$

if you wanna shoot me offlist with the complete list of countries and
sub-divisions i'll see if i can put together a working example of what i'm
talking about.

<tip type="JavaScript" author=".jeff">

there's a nice shorthand way of defining a list as an array.  simply
surround the list with square brackets and each individual list item with
quotes (i prefer single).  so, instead of this:

var myArray = 'california,oregon,idaho,washington';

you'd do this:

var myArray = ['california','oregon','idaho','washington'];

</tip>

<tip type="ColdFusion" author=".jeff">

want an easy way to output a list in coldfusion as an array in javascript?
ListQualify() is your friend.

<cfscript>
  myList = 'california,oregon,idaho,washington';
</cfscript>

<script language="JavaScript" type="text/javascript">
<!--
  var myArray = [#ListQualify(myList, "'")#];
// -->
</script>

which results in the following:

<script language="JavaScript" type="text/javascript">
<!--
  var myArray = ['california','oregon','idaho','washington'];
// -->
</script>

</tip>

good luck,

.jeff

http://evolt.org/

NOTICE:  members.evolt.org web and email address are changing!
---------------------------------------------------------------------
| OLD:                            | NEW:                            |
| jeff at members.evolt.org          | evolt at jeffhowden.com            |
| http://members.evolt.org/jeff/  | http://evolt.jeffhowden.com/    |
---------------------------------------------------------------------





More information about the thelist mailing list