Question

I am new to javascript and also stackoverflow.

Please bare my english knowledge and javascript knowledge.

Here it goes……
I have Select option dropdown in my page. And I have divs.

below is my code this is working fine in firefox but not in ie or google chrome

function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = 'block';
}
}

function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = 'none';
}
}

and this is my html code………

<select style="width:205px;padding:4px;margin-left:1px;">
  <option onClick="show_visibility('foo1','foo4');hide_visibility('foo2','foo3', 'foo4','foo5','foo6','foo7') ">Program Eligibility Report</option>
  <option onClick="show_visibility('foo2','foo5');hide_visibility('foo1','foo3', 'foo4','foo6') ">Audit Report</option>
  <option onClick="show_visibility('foo3','foo6');hide_visibility('foo1','foo2', 'foo4','foo5') ">Status Change Report</option>
  <option value="option4">Family Affiliation Audit Report</option>
  <option value="option5">Marketing Category Report</option>
  <option value="option6">Pending Approval Report</option>
</select>

For the above code perfectly working in Firefox, but not in IE

Kindly help me here.

Answer 1

You need to hook into the onchange event of the SELECT itself, and from there determine which option was selected.

<select onchange="selChange(this)">...

JS:

function selChange(select) {
    selectedValue = select.options[select.selectedIndex].value;
    if(selectedValue == 'whatever') {
    ....your code...
    }
}