两个下拉列表之间的HTML选择脚本

时间:2012-01-20 02:56:45

标签: html select drop-down-menu

我在使用标记构建的html中有两个droplist。

<select name="List1" id="List1" onclick="GetVal()">
<option value="1" selected="selected">Mercurio</option>
<option value="2">Venus</option>
<option value="3">Tierra</option>
<option value="4">Marte</option>
</select>

<select name="List2" id="List2">
<option value="1" selected="selected">Hg</option>
<option value="2">Ve</option>
<option value="3">Ti</option>
<option value="4">Ma</option>
</select>

我编写了一个脚本,例如从List2中选择一个元素依赖于List1的相应元素的选择。

    <script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
var LSelect1 = document.getElementById('List1');
var LSelect2 = document.getElementById('List2');
switch (LSelect1.selectedIndex)
{
case 1:
  LSelect2.selectedIndex = 1;
  break;
case 2:
  LSelect2.selectedIndex = 2;
  break;
case 3:
  LSelect2.selectedIndex = 3;
  break;
default:
  LSelect2.selectedIndex = 4;
}
}
// ]]>
</script>

但是,该函数错误地用于List1的第一个元素。为什么呢?

1 个答案:

答案 0 :(得分:2)

selectedIndex从0开始。一种更简单的做事方式可能是这样的:

<script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
    var LSelect1 = document.getElementById('List1');
    var LSelect2 = document.getElementById('List2');

    LSelect2.selectedIndex = LSelect1.selectedIndex;
}
// ]]>
</script>