[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