HTML dropdown menus to change dynamically with javascript
I've been trying to get this to work but 开发者_StackOverflowit's got me stumped. I have a form which consists of dropdown menus. What I'm trying to do is whenever someone selects a subject the tutors list will dynamically change however if a subject is not selected then a default list should show in the tutor drop down menu.
Here's what I've got so far:
index.php
<form id="show-course" name="show-course" method="post" action="#">
<table id="search">
<tr>
<th class="subject">
<select name="subject" onchange="showCourse(this.value, 'Subject');listTutors(this.selectedIndex);">
<option selected="selected" value=""></option>
<option value="Subject">Subject</option>
</select>
</th>
<th class="tutor">
<select name="tutor" onchange="showCourse(this.value, 'Tutor');">
<option selected="selected" value=""></option>
<option value="Tutor">Tutor</option>
</select>
</th>
</tr>
</table>
script.js
function listTutors(index)
{
document.show-course.tutor.options.length = 0;
switch (index)
{
case 1:
case 2:
case 3:
case 4:
alert(index);
break;
case 5:
alert(index);
break;
}
}
I can't get the document.show-course.tutor.options.length = 0; code line to work. I think that if I can get this to work I can figure the rest our for myself. Thanks!
Firstly you cannot have dashes in names and access them like
document.show-course.tutor.options.length = 0;
you would need
document.forms["show-course"].tutor.options.length = 0;
You mean
<select name="subject" onchange="showCourse(this.value, 'Subject');listTutors(this);">
and
function listTutors(sel) {
var index = sel.selectedIndex
// sel.options.length = 0; // this will EMPTY the list is that what you want?
sel.selectedIndex = 0; // this will reset the selection - I think that is what you meant
精彩评论