Show/Hide Multiple DIV IDs on Select
<p>I Would like the div to show based on the option selected.</p>

<p>This is what I'm trying however when I select a new option I'd like to replace the div that's there and this is displaying them all one after the other as I select new options.</p>

<pre><code>&lt;div id="body" style="width:300px;"&gt;
&lt;div&gt;
&lt;form name="frmOptions"&gt;
&lt;select id="cboOptions" onChange="displayDiv('div',this)"&gt;
&lt;option value="1"&gt;Option0&lt;/option&gt;
&lt;option value="2"&gt;Option1&lt;/option&gt;
&lt;option value="3"&gt;Option2&lt;/option&gt;
&lt;option value="4"&gt;Option3&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;div id="content" style="float:right;"&gt;

    &lt;div id="div0" style="display:none;"&gt;Test 0&lt;/div&gt;
    &lt;div id="div1" style="display:none;"&gt;Test 1&lt;/div&gt;
    &lt;div id="div2" style="display:none;"&gt;Test 2&lt;/div&gt;
    &lt;div id="div3" style="display:none;"&gt;Test 3&lt;/div&gt;

&lt;/div&gt;

&lt;/form&gt;
</code></pre>

<p></p>

<p>The script I'm using.</p>

<pre><code>&lt;script type="text/javascript"&gt;
     function displayDiv(id,sel){
     var div = document.getElementById(id+sel.selectedIndex);
     if (div) div.style.display = 'block';
     }
&lt;/script&gt;
</code></pre>

<p>Could anyone help me with this? </p>
