So I have an option box that depending on the option selected I would like different check boxes to appear underneath the option box. Here is what I have so far however it deletes the rest of the page.. do I have to document.write the whole page again… or is there an easier way?
<html>
<body>
<b>OPTIONS!!!</b>
<br>
<select name=”cmbmea” id=”opt” onchange=”toggle()”>
<option value=”0″></option>
<option value=”1″>option 1</option>
<option value=”2″>option 2</option>
</select>
<br>
<script language = javascript>
function toggle() {
var unit = document.getElementById(“opt”).value;
if (unit ==”1″){
document.write(“<td width=’240′ valign=’top’> <b>What Elements?</b><p><input type=’checkbox’ name=’ELA’ value=’EA’>A</p><p><input type=’checkbox’ name=’ELB’ value=’EB’>B</p><p> <input type=’checkbox’ name=’ELC’ value=’EC’>C</p><p> <input type=’checkbox’ name=’ELD’ value=’ED’>D</p></td>”);
}
if (unit ==”2″){
document.write(“<td width=’240′ valign=’top’> <b>What Elements?</b><p><input type=’checkbox’ name=’ELA’ value=’EA’>A</p><p><input type=’checkbox’ name=’ELB’ value=’EB’>B</p><p> <input type=’checkbox’ name=’ELC’ value=’EC’>C</p></td>”);
}
}
</script>
</body>
</html>