开发者

HTML dropdown menus to change dynamically with javascript

开发者 https://www.devze.com 2023-02-01 13:05 出处:网络
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 tut

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
0

精彩评论

暂无评论...
验证码 换一张
取 消