I have two select boxes. When the user picks a value in the first one it
completely re-populates the second one. It works fine, but only generates a
standard OPTIONS list and I now want to group the options using OPTGROUPs.
<select name="Selector1 " size="1"
onchange="reloa d2(this.options .selectedIndex, document.Form1. Selector2)">
<option .....
</select>
<script type="text/javascript">
function reload2(Index1, Selector2)
{
// Do not bother blanking '0', as it will always be re-written.
for (x1=Selector2.o ptions.length-1; x1>0; x1--)
{
Selector2.optio ns[x1]=null;
}
switch (Index1)
{
case 0: // Disclaimer
Selector2.optio ns[0]=new Option("Disclai mer",
"disclaimer.htm l");
break;
case 1: // Chapter 1
Selector2.optio ns[0]=new Option("Chapter 1 Title",
"chapter1.html" );
Selector2.optio ns[1]=new Option("Section 1.1",
"chapter1.html# 1.1");
Selector2.optio ns[2]=new Option("Section 1.2",
"chapter1.html# 1.2");
Selector2.optio ns[3]=new Option("Section 1.3",
"chapter1.html# 1.3");
break;
....
case 99: // Chapter 99 - Stockists
Selector2.optio ns[0]=new Option("Chapter 99 - Stockists",
"stockists.html ");
Selector2.optio ns[1]=new Option("USA - Arizona",
"stockists.html #USA-AZ");
Selector2.optio ns[2]=new Option("USA - California",
"stockists.html #USA-CA");
Selector2.optio ns[3]=new Option("USA - Colorado",
"stockists.html #USA-CO");
Selector2.optio ns[4]=new Option("USA - Texas",
"stockists.html #USA-TX");
Selector2.optio ns[5]=new Option("Belgium ", "stockists.html #be");
Selector2.optio ns[6]=new Option("France" , "stockists.html #fr");
Selector2.optio ns[7]=new Option("Germany ", "stockists.html #de");
break;
default: // Unrecognised chapter.
alert("Chapter " + x + " is not available.");
Selector2.optio ns[0]=new Option("Unknown ", "unknown.html") ;
break;
}
Selector2.optio ns[0].selected=true;
return true;
}
</script>
This works fine, and for chapter 99 it creates an options list like this:
<option selected value="stockist s.html">Chapter 99 - Stockists</option>
<option value="stockist s.html#USA-AZ">USA - Arizona</option>
<option value="stockist s.html#USA-CA">USA - California</option>
<option value="stockist s.html#USA-CO">USA - Colorado</option>
<option value="stockist s.html#USA-TX">USA - Texas</option>
<option value="stockist s.html#be">Belg ium</option>
<option value="stockist s.html#fr">Fran ce</option>
<option value="stockist s.html#ge">Germ any</option>
But as the list has grown, I want to group the items, like this:
<option selected value="stockist s.html">Chapter 99 - Stockists</option>
<optgroup label="USA">
<option value="stockist s.html#USA-AZ">Arizona</option>
<option value="stockist s.html#USA-CA">Californi a</option>
<option value="stockist s.html#USA-CO">Colorado</option>
<option value="stockist s.html#USA-TX">Texas</option>
</optgroup>
<optgroup label="Europe">
<option value="stockist s.html#be">Belg ium</option>
<option value="stockist s.html#fr">Fran ce</option>
<option value="stockist s.html#ge">Germ any</option>
</optgroup>
Does anyone know how I can do this dynamically (client-side) ?
--
ce****@waitrose .com