Menu
Hi,
I have some code that isn’t working quite like I expect. I have a simple drop down menu with options, and I want to make it so that when the end user selects an option it turns the visibility of a div on or off. Eventually I am going to have 150 or so options but here is what I have so far:
[CODE]
<body>
<form id=”form1″ name=”form1″ method=”post”>
Card
<select name=”select”>
<option>Choose Code</option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
</select>
<input type=”submit” name=”Submit” value=”Submit” onclick=”document.getElementById(‘AAA’).style.display == ‘block’ ?
document.getElementById(‘AAA’).style.display = ‘none’:
document.getElementById(‘AAA’).style.display = ‘block’; return true;”/>
</form>
<div id=”AAA” style=”DISPLAY: none”>AAA cards are good.</div>
<div id=”BBB” style=”DISPLAY: none”>BBB cards are good.</div>
<div id=”CCC” style=”DISPLAY: none”>CCC cards are good.</div>
<div id=”DDD” style=”DISPLAY: none”>DDD cards are good.</div>
</body>
What is strange is that this works intermittently. If I test it and I choose “AAA” and submit, I get nothing. Then repeat with “BBB” and nothing. Then “CCC” and my AAA div then appears and quickly disappears.
I also want the divs to load dynamically, so if you choose “AAA” you see the AAA div, if you choose “BBB” you see the BBB div, and so on.
Is it possible to this working with javascript only, no database, can’t touch the <head> or <body> tag?
Thanks