Javascriptのチェーンメニューのドロップダウン表示

次のHTML/JSコードを使用して、最初のドロップダウンの下に2番目のドロップダウンメニューを表示しています。Javascriptのチェーンメニューのドロップダウン表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">  
<head> 
<!-- Title --> 
<title>Test</title> 
<!-- --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="en-gb" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<script type="text/javascript"> 
    function switchStates(obj) {  
     if (obj.selectedIndex==14){document.getElementById('ddlCollectionStatesUSA').style.visibility='visible'}else {document.getElementById('ddlCollectionStatesUSA').style.visibility='hidden'}; 

     if (obj.selectedIndex==2){document.getElementById('ddlCollectionStatesIRL').style.visibility='visible'}else {document.getElementById('ddlCollectionStatesIRL').style.visibility='hidden'}; 

     if (obj.selectedIndex==15){document.getElementById('ddlCollectionStatesCAN').style.visibility='visible'}else {document.getElementById('ddlCollectionStatesCAN').style.visibility='hidden'}; 

     if(document.getElementById('qq_deliverycountry').selectedIndex != 0) {document.getElementById('qq_collectioncountry').disabled = true;}else {document.getElementById('qq_collectioncountry').disabled = false;}  

    } 
</script> 
</head> 
<body>      

<form action="#" method="post">       
<fieldset> 
    <h3>Delivery Details</h3>       
    <div class="inputs"> 
    <label for="qq_deliverycountry">Country</label> 
    <select id="qq_deliverycountry" name="dcountry" onchange="switchStates(this)">        
     <option selected="selected" value="GBR">United Kingdom (Mainland)</option> 
     <option value="">--------------------</option> 
      <option value="IRL">Republic of Ireland</option>       
     <option value="GGY">Channel Islands (Guernsey)</option> 
     <option value="JEY">Channel Islands (Jersey and Sark)</option> 
      <option value="NIR">Northern Ireland</option> 
     <option value="">--------------------</option> 
     <option value="FRA">France</option> 
     <option value="DEU">Germany</option> 
     <option value="ITA">Italy</option> 
     <option value="POL">Poland</option> 
     <option value="PRT">Portugal</option> 
     <option value="ESP">Spain</option> 
     <option value="AUS">Australia</option> 
      <option value="USA">United States of America</option> 
     <option value="CAN">Canada</option> 
     <option value="CHN">China</option> 
    </select> 
    </div>        
<div> 

<label for="ddlCollectionStatesUSA">State/Province</label> 
    <select name="ddlCollectionStatesUSA" id="ddlCollectionStatesUSA" class="ddList" style="position: relative; top: 0; left: 0; visibility: hidden; border-color: default;"> 
     <option selected="selected" value=""></option> 
     <option value="Alabama">Alabama</option> 
     <option value="Alaska">Alaska</option> 
    </select> 
    <select name="ddlCollectionStatesCAN" id="ddlCollectionStatesCAN" class="ddList" 
     style="position: relative; top: 0; left: 0; border-color: default; visibility: hidden;"> 
     <option selected="selected" value=""></option> 
     <option value="Alberta">Alberta</option> 
     <option value="Britich Columbia">Britich Columbia</option> 
    </select> 
    <select name="ddlCollectionStatesIRL" id="ddlCollectionStatesIRL" class="ddList" style="position: relative; top: 0; left: 0; border-color: default; visibility: hidden;"> 
     <option selected="selected" value=""></option> 
     <option value="Antrim">Antrim</option> 
     <option value="Armagh">Armagh</option> 
    </select> 
    </div><!-- end of states container --> 
    </div> 
    </fieldset> 
    </form> 
    </div> 
</body> 
</html>

私は、アメリカ、カナダ、アイルランドを選択した場合、それは下に、関連する州/地方が表示されますので、それは見事に動作します。私は第二ドロップダウンが（すなわち、直接最初のドロップダウンの下に）米国のドロップダウンが表示されます場所を正確にするのではなく、右に少しを表示するアイルランドまたはカナダを選択場合

マイ唯一の問題です。

これを修正するにはどうすればよいですか？

ここにご入力いただきありがとうございます。

出典

2012-01-21 michaelmcgurk