I’m using the following HTML/JS code to display a 2nd dropdown menu below the first dropdown.
<!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>
It works brilliantly so if I select USA, Canada or Ireland it will show the relevant states/provinces underneath.
My only issue is if I select Ireland or Canada the 2nd dropdown displays a little to the right instead of exactly where the USA dropdown appears (i.e. directly underneath first dropdown).
How do I fix this?
Many thanks for your input here.
Swap out the
visibility='hidden'fordisplay='none'.The visibility setting hides the element but it still takes up space on the page. Using display will reclaim the space in the document flow allowing all the drop down to appear right next to the label as the other dropdowns are not in the way.
Example: http://jsfiddle.net/Z82Wz/