HTML下拉菜单,可以使用javascript动态更改

时间:2010-12-30 06:35:58

标签: javascript html forms

我一直试图让这个工作,但它让我难过。我有一个由下拉菜单组成的表单。我想要做的是每当有人选择一个主题时,导师列表将动态更改,但如果未选择主题,则默认列表应显示在教师下拉菜单中。

这是我到目前为止所得到的:

的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;
 }
}

我无法获取document.show-course.tutor.options.length = 0;代码行工作。我认为,如果我可以让这个工作,我可以为自己找到其余部分。谢谢!

1 个答案:

答案 0 :(得分:0)

首先,您不能在名称中使用破折号并像

一样访问它们
 document.show-course.tutor.options.length = 0;

你需要

document.forms["show-course"].tutor.options.length = 0;

你的意思是

<select name="subject" onchange="showCourse(this.value, 'Subject');listTutors(this);">

 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