Simple display elements based on selected menu option

Firefox happy, IE6 oblivious.

[steveAircav]

Hello all,

I have a problem with a simple function call that is just being ignored by IE6 (possibly IE7) and as Javascript novice I tend to stick to what I know works. So this one I have been unable to fix even after many hours of staring at the code. I would appreciate any life lines that are offered.

The first function shows only one 'hidden' element based on the drop down selection. (works as intended in FF and I have stripped out the PHP that looks for a stored value from the database, to simplify the issue).

//
// Make sure only one class of employment question is open at a time.
//
function toggleempDiv(thedivid){
var divIds=['app_one_employed', 'app_one_self_emp', 'app_one_contractor'];
var i, div;
for(i=0; (div=document.getElementById(divIds[i])) ;i++){
if(divIds[i]!==thedivid){
document.getElementById(divIds[i]).style.display = 'none';
}else{
document.getElementById(divIds[i]).style.display = 'block';
}
}
} 
//
// A simple element visabilty swapper.
//
function toggleDiv(divid){
 if(document.getElementById(divid).style.display == 'none'){
 document.getElementById(divid).style.display = 'block';
 }else{
 document.getElementById(divid).style.display = 'none';
 }
 }
 
//

This is called from a standard select menu.

<select name="app_one_emp_status" id="app_one_emp_status"><option value="" selected="selected" >Please Select</option>
<option value="employed" onclick="toggleempDiv('app_one_employed'); return false;" >employed</option>
  <option value="Self Employed" onclick="toggleempDiv('app_one_self_emp'); return false;" >Self Employed</option>
  <option value="Contractor" onclick="toggleempDiv('app_one_contractor'); return false;" >Contractor</option>
  <option value="Benefits" onclick="toggleempDiv('#null'); return false;" >Benefits</option>
  <option value="Unemployed" onclick="toggleempDiv('#null'); return false;" >Unemployed</option>
  <option value="Voluntary Work" onclick="toggleempDiv('#null'); return false;" >Voluntary Work</option>
  </select>

IE6 is happy with the simple toggle however it completely ignores the function call to ensure that only one of the group of 3 divs is visible at any one time.

As I say, any help would be very much appreciated.

[edited by: steveAircav at 8:43 pm (utc) on Feb. 6, 2008]

[daveVk]

for(i=0; (div=document.getElementById(divIds[i])) ;i++){

not sure this will terminate when you expect, as you dont use div try

for(i=0; (divIds[i]) ;i++){

OR

for ( i=0; i<divIds.length; i++ ) {

OR

similar

[steveAircav]

Thanks for the response daveVk, both of those suggestions work as expected in firefox however, IE6 continues to ignore the Javascript altogether. Very frustrating.

For clarity sake

var divIds=['app_one_employed', 'app_one_self_emp', 'app_one_contractor'];

Refers to three divs immediately below the drop down selector.

[daveVk]

Quote from msdn

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.

That would seem to explain it.

[steveAircav]

It seems that the javascript will only work when applied to the select element itself, so I changed the 'onclick's' method to the following

<?php
echo "<select name=\"app_one_emp_status\" id=\"app_one_emp_status\" onchange=\"selectedEmp(app_one_emp_status.selectedIndex); return false;\">";
    
$apponeempstatus=array(0 => 'Select', 'Employed', 'Self Employed', 'Contractor', 'Benefits', 'Unemployed', 'Voluntary Work');
// values to pass to function ($array, $variable name to match, default value)
drop_selector($apponeempstatus, $app_one_emp_status, 'Select');
?>

Which returns a numeric corresponding to the option selected. Which then gets parsed by the original Javascript.

Thanks again, you helped stop me going insane on that one.