IE not grabbing SELECT value

[Amer Neely]

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result in
the correct response when 'Show Me' is clicked. But IE only shows the
result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:
function updateList(what)
{
// This dynamically populates the CurrentPositionPicks select box in
the resume page
// depending on what one was selected in the LevelOne select box.
for (var i=0;i<document.Resume.CurrentPositionPicks.length; i++) //
empty the list
{
document.Resume.CurrentPositionPicks.options.lengt h=0;
}

// LevelOnePicks is the top level select box in the resume form
// CurrentPositionPicks is the dynamically generated select list
var CurrentPositionPicks=document.Resume.CurrentPositi onPicks;
for (var i=0;i<document.Resume.LevelOnePicks.length;i++)
{
if (document.Resume.LevelOnePicks.options[i].selected)
{
var ThisList=eval(TopLevel[i].Name); // get the array name to use
for (var j=0; j < ThisList.length; j++)
{
CurrentPositionPicks.options[j]=new Option;
CurrentPositionPicks.options[j].text=ThisList[j];
}
}
}
}

[RobB]

Amer Neely wrote:

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result in the correct response when 'Show Me' is clicked. But IE only shows the result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:
function updateList(what)
{
// This dynamically populates the CurrentPositionPicks select box in the resume page
// depending on what one was selected in the LevelOne select box.
for (var i=0;i<document.Resume.CurrentPositionPicks.length; i++) //
empty the list
{
document.Resume.CurrentPositionPicks.options.lengt h=0;
}

// LevelOnePicks is the top level select box in the resume form
// CurrentPositionPicks is the dynamically generated select list
var CurrentPositionPicks=document.Resume.CurrentPositi onPicks;
for (var i=0;i<document.Resume.LevelOnePicks.length;i++)
{
if (document.Resume.LevelOnePicks.options[i].selected)
{
var ThisList=eval(TopLevel[i].Name); // get the array name to use
for (var j=0; j < ThisList.length; j++)
{
CurrentPositionPicks.options[j]=new Option;
CurrentPositionPicks.options[j].text=ThisList[j];
}
}
}
}

The two browsers handle multiple selects differently. To get selected
option values/texts cross-browser, you need to loop the options and
examine them. In addition, your updateList() function isn't setting
option values, just displayed text. Some browsers will substitute the
latter for the former but, don't rely on it...set both.

function Output()
{
var o,
picked = [],
msel = document.Resume.CurrentPositionPicks;
for (var i = 0, l = msel.length; i < l; ++i)
{
if ((o = msel.options[i]).selected)
picked.push(o.text);
}
alert(
'You chose\n' +
document.Resume.LevelOnePicks.value +
':' +
picked.join(' | ')
);
}

Matt Kruse will now plug his script. #:=D

[Mick White]

Amer Neely wrote:

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result in
the correct response when 'Show Me' is clicked. But IE only shows the
result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:

I would use a simpler technique:

<script type="text/javascript">
window["night spots"]=["Café Royale","Maxim's","Rose and Crown"];
cars=["ford","dodge","buick"];
countries=["USA","UK","East Timor"];

function populateMenuWithArray(menu,array){
var alen=array.length;
menu.options.length=0;
for(var i=0;i<alen;i++){
menu.options[i]=new Option(array[i],array[i]);
}
}

</script>

<form action="some.html" method="get" name="f">
<select name="a" onchange=
"if(this.selectedIndex)
populateMenuWithArray(this.form.b,
window[this[this.selectedIndex].text]);">
<option selected>Select One</option>
<option>cars</option>
<option>countries</option>
<option>night spots</option>
</select>
<select name="b"></select>
Mick (tested)

snip

[Amer Neely]

Mick White wrote:

Amer Neely wrote:

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result in
the correct response when 'Show Me' is clicked. But IE only shows the
result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:

I would use a simpler technique:

<script type="text/javascript">
window["night spots"]=["Café Royale","Maxim's","Rose and Crown"];
cars=["ford","dodge","buick"];
countries=["USA","UK","East Timor"];

function populateMenuWithArray(menu,array){
var alen=array.length;
menu.options.length=0;
for(var i=0;i<alen;i++){
menu.options[i]=new Option(array[i],array[i]);
}
}

</script>

<form action="some.html" method="get" name="f">
<select name="a" onchange=
"if(this.selectedIndex)
populateMenuWithArray(this.form.b,
window[this[this.selectedIndex].text]);">
<option selected>Select One</option>
<option>cars</option>
<option>countries</option>
<option>night spots</option>
</select>
<select name="b"></select>
Mick (tested)

snip

Thanks for the quick response - I do like your simpler function. But IE
still only shows the second SELECT box choice.

I'm going to try the suggestion by RobB about looping through the list
boxes.

[Amer Neely]

RobB wrote:

Amer Neely wrote:

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result

in

the correct response when 'Show Me' is clicked. But IE only shows the

result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:
function updateList(what)
{
// This dynamically populates the CurrentPositionPicks select box in

the resume page
// depending on what one was selected in the LevelOne select box.
for (var i=0;i<document.Resume.CurrentPositionPicks.length; i++) //
empty the list
{
document.Resume.CurrentPositionPicks.options.lengt h=0;
}

// LevelOnePicks is the top level select box in the resume form
// CurrentPositionPicks is the dynamically generated select list
var CurrentPositionPicks=document.Resume.CurrentPositi onPicks;
for (var i=0;i<document.Resume.LevelOnePicks.length;i++)
{
if (document.Resume.LevelOnePicks.options[i].selected)
{
var ThisList=eval(TopLevel[i].Name); // get the array name to use
for (var j=0; j < ThisList.length; j++)
{
CurrentPositionPicks.options[j]=new Option;
CurrentPositionPicks.options[j].text=ThisList[j];
}
}
}
}

The two browsers handle multiple selects differently. To get selected
option values/texts cross-browser, you need to loop the options and
examine them. In addition, your updateList() function isn't setting
option values, just displayed text. Some browsers will substitute the
latter for the former but, don't rely on it...set both.

function Output()
{
var o,
picked = [],
msel = document.Resume.CurrentPositionPicks;
for (var i = 0, l = msel.length; i < l; ++i)
{
if ((o = msel.options[i]).selected)
picked.push(o.text);
}
alert(
'You chose\n' +
document.Resume.LevelOnePicks.value +
':' +
picked.join(' | ')
);
}

Matt Kruse will now plug his script. #:=D

Ah, that figures. Thanks for the direction and the sample code.

[Amer Neely]

RobB wrote:

Amer Neely wrote:

I have a page showing dynamic generation of a SELECT box using
JavaScript. See http://www.softouch.on.ca/dynamic.html.

Using Mozilla et al, choosing an option from both lists will result

in

the correct response when 'Show Me' is clicked. But IE only shows the

result from the first SELECT box. Any ideas why / how to fix this?

The function I'm using:
function updateList(what)
{
// This dynamically populates the CurrentPositionPicks select box in

the resume page
// depending on what one was selected in the LevelOne select box.
for (var i=0;i<document.Resume.CurrentPositionPicks.length; i++) //
empty the list
{
document.Resume.CurrentPositionPicks.options.lengt h=0;
}

// LevelOnePicks is the top level select box in the resume form
// CurrentPositionPicks is the dynamically generated select list
var CurrentPositionPicks=document.Resume.CurrentPositi onPicks;
for (var i=0;i<document.Resume.LevelOnePicks.length;i++)
{
if (document.Resume.LevelOnePicks.options[i].selected)
{
var ThisList=eval(TopLevel[i].Name); // get the array name to use
for (var j=0; j < ThisList.length; j++)
{
CurrentPositionPicks.options[j]=new Option;
CurrentPositionPicks.options[j].text=ThisList[j];
}
}
}
}

The two browsers handle multiple selects differently. To get selected
option values/texts cross-browser, you need to loop the options and
examine them. In addition, your updateList() function isn't setting
option values, just displayed text. Some browsers will substitute the
latter for the former but, don't rely on it...set both.

function Output()
{
var o,
picked = [],
msel = document.Resume.CurrentPositionPicks;
for (var i = 0, l = msel.length; i < l; ++i)
{
if ((o = msel.options[i]).selected)
picked.push(o.text);
}
alert(
'You chose\n' +
document.Resume.LevelOnePicks.value +
':' +
picked.join(' | ')
);
}

Matt Kruse will now plug his script. #:=D

This solution worked perfectly (but I changed the order of display).
Thanks again.

[Mick White]

Amer Neely wrote:

Mick White wrote:

function populateMenuWithArray(menu,array){
var alen=array.length;
menu.options.length=0;
for(var i=0;i<alen;i++){
menu.options[i]=new Option(array[i],array[i]);
}
}

</script> snip

Thanks for the quick response - I do like your simpler function. But IE
still only shows the second SELECT box choice.

I'm going to try the suggestion by RobB about looping through the list
boxes.

Works for me, IE 5.2(Mac), FF 1.0(mac), Moz 1.7.3(Mac), Safari 1.03
Mick