Select box and div tags

[GezH]

Hi again.

I have two blocks of code surrounded by div tags as below:

<DIV id=div1 STYLE=&quot;DISPLAY:INLINE&quot;>
Sample text one
</DIV>


<DIV id=div2 STYLE=&quot;DISPLAY:NONE&quot;>
Sample text two
</DIV>

I want a select box with two options. Selecting an option hides one div item and shows the other, whilst selecting the other does vice-versa.

How can I achieve this please?

Thanks for any help.

 

[mwolf00]

This is a reply to another post, but you can easily modify it for your needs....

<script>
CanadaArr = new Array(&quot;Albert&quot;,&quot;British Columbia&quot;,&quot;Manitoba&quot;,&quot;New Brunswick&quot
USArr = new Array(&quot;AK&quot;,&quot;CA&quot;,&quot;DE&quot;,&quot;MD&quot;,&quot;VA&quot

function showRegion(){
showField = document.getElementById(&quot;regDisp&quot
regSelect = document.getElementById(&quot;region&quot
regSelect.options.length = 0
ctry = document.myForm.country.options[document.myForm.country.selectedIndex].value

if (ctry != &quot;&quot{
showField.style.display = &quot;block&quot;
regArr = new Array()
regArr = eval(ctry + &quot;Arr&quot
for (x=0; x<regArr.length; x++){
regSelect.options[x] = new Option(regArr[x],regArr[x])
}
}
else{
showField.style.display = &quot;none&quot;
}
}
</script>

<form name=&quot;myForm&quot;>
Country: <select id=&quot;country&quot; onChange=&quot;showRegion()&quot;>
<option value=&quot;&quot;>Choose One
<option value=&quot;Canada&quot;>Canada
<option value=&quot;US&quot;>US
</select>

<div id=&quot;regDisp&quot; style=&quot;display:none;&quot;>
Region: <select id=&quot;region&quot;></select>
</div>
</form>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[SashiRaveendran]

<select onchange=&quot;Show(this.value)&quot;>
<option value=1>Show Div 1
<option value=2>Show Div 2
</select>

<br>

<DIV id=div1 STYLE=&quot;DISPLAY:INLINE&quot;>
Sample text one
</DIV>

<DIV id=div2 STYLE=&quot;DISPLAY:NONE&quot;>
Sample text two
</DIV>

<script>
divCount = 2;
function Show(div)
{
for (var i=1; i<divCount+1; i++) eval(&quot;div&quot;+i+&quot;.style.display = 'none'&quot
eval(&quot;div&quot;+div+&quot;.style.display = 'inline'&quot;
}
</script>

on error goto hell

 

[GezH]

Thanks guys, I made something useful from that. But I have another problem...

The text enclosed within the DIV tags I have formatted in table form - this seems to destroy the functionality. Is it not possible to use divs and tables together?

ie...
<table>

<DIV id=div1 STYLE=&quot;DISPLAY:NONE&quot;>
<tr><td>
Sample text one
</td></tr>
</DIV>

</table>

 

[SashiRaveendran]

put the table tag within the div tag...



<DIV id=div1 STYLE=&quot;DISPLAY:NONE&quot;>
<table>
<tr><td>
Sample text one
</td></tr>
</table>
</DIV>


on error goto hell

 

[mwolf00]

You can also just give the table row the ID..

<tr id=&quot;myRow&quot;>
..
...
...
</tr>


<script>
document.getElementById(&quot;myRow&quot.style.display = &quot;none&quot;

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook