Dynamic SELECT boxes with <OPTGROUP>s

[cedawe]

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) ?

--
cedawe@waitrose .com

[Thomas 'PointedEars' Lahn]

Re: Dynamic SELECT boxes with &lt;OPTGROUP&gt ;s

cedawe wrote:
[color=blue]
> 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.
> [...]
> Does anyone know how I can do this dynamically (client-side) ?[/color]

Using the W3C-DOM, it should be easy:

// create new option group
var oGroup = document.create Element('optgro up');
oGroup.value = "...";

// create new option (maybe you can/must use the Option(...) constructor)
var oOption = document.create Element('option ');
oOption.value = "...";
oOption.text = "...";
...

// append the option to the option group
oGroup.appendCh ild(oOption);

// get a reference to the `select' element
var oSelect = document.forms[...].elements[...];

// append the option group
oSelect.appendC hild(oGroup);

Untested, HTH.


PointedEars

[A. Nonymous]

Re: Dynamic SELECT boxes with &lt;OPTGROUP&gt ;s

I realize this is 6 months after the fact but...

This should read as

var oGroup = document.create Element('OPTGRO UP');
oGroup.label = "..."; <===== Use ".label"

and ...

var oOption = document.create Element('OPTION ');
oOption.value = "...";
oOption.innerTe xt = "..."; <==== Use ".innerText "

oGroup.appendCh ild(blah!);
oSelect.appendC hile(blah!);

....blah, blah!
I have only verified this behaviour on IE6.
Did anyone verify on Opera or NN?

"Thomas 'PointedEars' Lahn" <PointedEars@we b.de> wrote in message
news:boeddb$1bq 2ga$1@ID-107532.news.uni-berlin.de...[color=blue]
> cedawe wrote:
>[color=green]
> > I have two select boxes. When the user picks a value in the first one[/color][/color]
it[color=blue][color=green]
> > completely re-populates the second one. It works fine, but only[/color][/color]
generates a[color=blue][color=green]
> > standard OPTIONS list and I now want to group the options using[/color][/color]
OPTGROUPs.[color=blue][color=green]
> > [...]
> > Does anyone know how I can do this dynamically (client-side) ?[/color]
>
> Using the W3C-DOM, it should be easy:
>
> // create new option group
> var oGroup = document.create Element('optgro up');
> oGroup.value = "...";
>
> // create new option (maybe you can/must use the Option(...)[/color]
constructor)[color=blue]
> var oOption = document.create Element('option ');
> oOption.value = "...";
> oOption.text = "...";
> ...
>
> // append the option to the option group
> oGroup.appendCh ild(oOption);
>
> // get a reference to the `select' element
> var oSelect = document.forms[...].elements[...];
>
> // append the option group
> oSelect.appendC hild(oGroup);
>
> Untested, HTH.
>
>
> PointedEars
>[/color]

[mscir]

Re: Dynamic SELECT boxes with &lt;OPTGROUP&gt ;s

A. Nonymous wrote:
[color=blue]
> I realize this is 6 months after the fact but...
> This should read as
> var oGroup = document.create Element('OPTGRO UP');
> oGroup.label = "..."; <===== Use ".label"
> var oOption = document.create Element('OPTION ');
> oOption.value = "...";
> oOption.innerTe xt = "..."; <==== Use ".innerText "
> oGroup.appendCh ild(blah!);
> oSelect.appendC hile(blah!);
> ...blah, blah!
> I have only verified this behaviour on IE6.
> Did anyone verify on Opera or NN?[/color]

My Netscape 7.1 didn't like innerText, but it does like innerHTML, if
you change that line it works on my IE6, Netscape 7.1, Firefox 0.8.
Here's how I tested it:

<script type="text/javascript">
function populate() {
// create new option group
var oGroup = document.create Element('optgro up');
// get reference to the `select' element
var oSelect = document.getEle mentById('selec t1');
//document.forms['form1'].elements['select1'];
oGroup.label = 'group1';
for (var i=0; i<5; i++) {
// create new options
var oOption = document.create Element('option ');
oOption.value = 'b'+i;
oOption.innerHT ML = 'b'+i;
// append the option to the option group
oGroup.appendCh ild(oOption);
// append the option group
oSelect.appendC hild(oGroup);
}
}
function show(oSelect,oS electIndex){
alert('You selected '+oSelect[oSelectIndex].value);
}
</script>

<form name="form1" id="form1">
<select name="select1" id="select1" onclick="show(t his,this.select edIndex)">
<option value='a0'>a0</option>
<option value='a1'>a1</option>
<option value='a2'>a2</option>
<option value='a3'>a3</option>
<option value='a4'>a4</option>
</select>
<p>
<input type="button" onclick="popula te()" value="Add Select Options">
</form>

Mike

[Grant Wagner]

Re: Dynamic SELECT boxes with &lt;OPTGROUP&gt ;s

mscir wrote:
[color=blue]
> A. Nonymous wrote:
>[color=green]
> > I realize this is 6 months after the fact but...
> > This should read as
> > var oGroup = document.create Element('OPTGRO UP');
> > oGroup.label = "..."; <===== Use ".label"
> > var oOption = document.create Element('OPTION ');
> > oOption.value = "...";
> > oOption.innerTe xt = "..."; <==== Use ".innerText "
> > oGroup.appendCh ild(blah!);
> > oSelect.appendC hile(blah!);
> > ...blah, blah!
> > I have only verified this behaviour on IE6.
> > Did anyone verify on Opera or NN?[/color]
>
> My Netscape 7.1 didn't like innerText, but it does like innerHTML, if
> you change that line it works on my IE6, Netscape 7.1, Firefox 0.8.
> Here's how I tested it:
>
> <script type="text/javascript">
> function populate() {
> // create new option group
> var oGroup = document.create Element('optgro up');
> // get reference to the `select' element
> var oSelect = document.getEle mentById('selec t1');
> //document.forms['form1'].elements['select1'];
> oGroup.label = 'group1';
> for (var i=0; i<5; i++) {
> // create new options
> var oOption = document.create Element('option ');
> oOption.value = 'b'+i;
> oOption.innerHT ML = 'b'+i;[/color]

oOption.appendC hild(document.c reateTextNode(' b'+i));

In cases like these, where the content is not too complicated (and not likely to
become complicated), I prefer document.create TextNode() to setting .innerHTML.
Any standards compliant browser that understands document.create Element() is
more likely to understand document.create TextNode() then .innerHTML. Making this
minor change removes any dependancy on proprietary attributes from your script.

That said, if I'm attempting to display extremely complicated, dynamically
created content, I typically use .innerHTML since it is such a huge pain to
construct complicated HTML using the standard methods. It also lets me write
code that can usually work on Netscape 4, since the same string can be output
using document.write( ).
[color=blue]
> // append the option to the option group
> oGroup.appendCh ild(oOption);
> // append the option group
> oSelect.appendC hild(oGroup);
> }
> }
> function show(oSelect,oS electIndex){
> alert('You selected '+oSelect[oSelectIndex].value);
> }
> </script>
>
> <form name="form1" id="form1">
> <select name="select1" id="select1" onclick="show(t his,this.select edIndex)">
> <option value='a0'>a0</option>
> <option value='a1'>a1</option>
> <option value='a2'>a2</option>
> <option value='a3'>a3</option>
> <option value='a4'>a4</option>
> </select>
> <p>
> <input type="button" onclick="popula te()" value="Add Select Options">
> </form>
>
> Mike[/color]

--
| Grant Wagner <gwagner@agrico reunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

[Thomas 'PointedEars' Lahn]

Re: Dynamic SELECT boxes with &lt;OPTGROUP&gt ;s

A. Nonymous wrote:[color=blue]
> This should read as
>
> var oGroup = document.create Element('OPTGRO UP');
> oGroup.label = "..."; <===== Use ".label"[/color]

Correct.

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38450247>
<http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/label_1.asp>
[color=blue]
> and ...
>
> var oOption = document.create Element('OPTION ');
> oOption.value = "...";
> oOption.innerTe xt = "..."; <==== Use ".innerText "[/color]

No, the proper property identifier as defined in DOM Level 0 (IE3+, NN3+) is
indeed "text". "innerText" is possible in IE, but in no way cross-browser.

<http://devedge.netscap e.com/library/manuals/2000/javascript/1.3/reference/option.html>
<http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/text_3.asp>
[color=blue]
> [...][/color]

Please do not top-post, see the FAQ.


PointedEars