我正在使用以下 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'。
可见性设置隐藏了元素，但它仍然占用页面空间。使用显示将回收文档流中的空间，允许所有下拉菜单显示在标签旁边，因为其他下拉菜单不会妨碍。
关于javascript - Javascript 链式菜单的下拉显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8952863/