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

Dropdown display Issue with Javascript Chained Menus

本文关键字：菜单 问题 链接 Javascript 显示      更新时间：2023-09-26

我使用以下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>

它非常出色，所以如果我选择美国、加拿大或爱尔兰，它将显示下面的相关州/省。

我的唯一问题是，如果我选择爱尔兰或加拿大，第二个下拉列表会显示在右侧，而不是美国下拉列表出现的确切位置（即，直接位于第一个下拉列表下方）。

我该如何解决这个问题？

非常感谢您在这里提供的意见。

将visibility='hidden'换成display='none'。

可见性设置会隐藏元素，但它仍会占用页面上的空间。使用显示将回收文档流中的空间，允许所有下拉列表都显示在标签旁边，因为其他下拉列表不会妨碍。

示例：http://jsfiddle.net/Z82Wz/

相关文章：