display divs using select box

[johnnyq]

Hi,

I am looking for a way to display divs using javascript based on a number selected from a simple select box as follows:

<SELECT id ="categories">
<OPTION id="opt1">1</OPTION>
<OPTION id="opt2">2</OPTION>
<OPTION id="opt3">3</OPTION>
<OPTION id="opt4">4</OPTION>
</SELECT>

When I select '1' I would like the first div to display.
When I select '2' I would like the first and second div to display.
When I select '3' I would like the first, second and third div to display.
etc...

Any help would be greatly appreciated.
Thanks in advance,
John

[harrierdh]

First, use lower case for your tags. Didn't test this. In a rush. Should be what you are looking for though.

Code: Select all

<script>
function showDiv() {
    var sel = document.getElementById("categories");
    var idx = sel.selectedIndex;
    var opt = sel[idx].value;
    if (opt == "opt1") {
         document.getElementById("div1").display = "block";
    } else if (opt == "opt2") {
         document.getElementById("div2").display = "block";
    } else if (opt == "opt3") {
         document.getElementById("div3").display = "block";
    }
}
</script>
<div id="div1" style="display: none;">&nbsp;</div>
<div id="div2" style="display: none;">&nbsp;</div>
<div id="div3" style="display: none;">&nbsp;</div>
<SELECT id ="categories" onChange="showDiv()">
<OPTION id="opt1">1</OPTION>
<OPTION id="opt2">2</OPTION>
<OPTION id="opt3">3</OPTION>
</SELECT>


[johnnyq]

Hi harrierdh,

Thanks very much for your reply. Unfortunately nothing seems to be happening with that code. Any other ideas?