下拉菜单显示问题链接菜单

我使用以下HTML/JS代码在第一个下拉菜单下方显示第二个下拉菜单。下拉菜单显示问题链接菜单

<!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