2つのドロップリスト間のHTML選択スクリプト

Question

タグを使用してHTMLで作成された2つのドロップリストがあります。

<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の最初の要素で間違って機能します。どうして？

Answer 1

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>