Menu
Hello.
I’m having an issue adding new options based on certain selections. Here’s the code.
[CODE]
<html><head><title>…</title>
<script type=”text/javascript”>
function checkSelected (the_choice){
var target_tag = document.getElementsByTagName(“select”)[1];
var new_option1 = document.createElement(“option”);
var new_option2 = document.createElement(“option”);
var first_text = document.createTextNode(“Westside”);
var sec_text = document.createTextNode(“Southside”);
//Isaiah’s Group
var new_option3 = document.createElement(“option”);
var new_option4 = document.createElement(“option”);
var thd_text = document.createTextNode(“Suburbs”);
var frth_text = document.createTextNode(“Southside”);
//Keith’s Group
new_option1.appendChild(first_text);
new_option2.appendChild(sec_text);
//Isaiah’s Options
new_option3.appendChild(thd_text);
new_option4.appendChild(frth_text);
if (the_choice==”Isaiah”){
removePreviousOpts();
target_tag.appendChild(new_option1);
target_tag.appendChild(new_option2);
}
else if (the_choice==”Keith”){
removePreviousOpts();
target_tag.appendChild(new_option3);
target_tag.appendChild(new_option4);
}
else if (the_choice==”Please select”)
{
removePreviousOpts();
}
}
function removePreviousOpts(){
var the_select = document.getElementsByTagName(“select”)[1];
var the_options = the_select.getElementsByTagName(“options”);
for (var i=0; i<the_options.length; i++){
the_options[i].parentNode.removeChild(the_options[i]);
}
}
</script>
<style type=text/css>
#the_table {position:absolute; left:200px; top:200px;}
</style>
</head>
<body>
<div id=”the_table”>
<table>
<tr>
<td>
<select onChange=”checkSelected(this.option.value)”;>
<option>Please Select</option>
<option>Isaiah</option>
<option>Keith</option>
</select>
</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</body>
</html>
Can’t really see where I’m wrong at…