I do not know Javascript that well so I do not know if I am going about this the wrong way. Any help would be appreciated.
This function attempts to hide the options inside of the optgroup tag of the second select box based on the user selected option of the first select box. It works fine in Mozilla but IE7 still shows all the optgroups in the second select box. The idea is to show the appropriate list of states based on what country a user selects without reloading the page.
You can see a sample of the form here:
http://www.allacparts.com/testjs.php
The optgroup tags have an id of ctyCAN and ctyUSA.
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="/css/form.css" type="text/css" media="all" />
<script type="text/javascript">
<!--
function showhideship() {
if (document.getElementById('country').value == "") {
document.getElementById('statewrap').style.display = "none";
document.getElementById('zipcodewrap').style.display = "none";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
}
else if (document.getElementById('country').value == "223") {
document.getElementById('statewrap').style.display = "block";
document.getElementById('ctyCAN').style.display = "none";
document.getElementById('ctyUSA').style.display = "block";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
}
else if (document.getElementById('country').value == "38") {
document.getElementById('statewrap').style.display = "block";
document.getElementById('ctyCAN').style.display = "block";
document.getElementById('ctyUSA').style.display = "none";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
}
else if (document.getElementById('country').value == "other") {
document.getElementById('statewrap').style.display = "none";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "block";
document.getElementById('countryotherwrap').style.display = "block";
}
else {
document.getElementById('statewrap').style.display = "block";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "block";
document.getElementById('countryotherwrap').style.display = "block";
}
}
//-->
</script>
</head>
<body onload="showhideship();">
<form method='post' action='/process/get-shipping.php?mode=1' name='shipquote' id='shipquote' class='shipquoteform'>
<p id="countrywrap">
<label for="country">Country: </label>
<select id="country" name="country" onchange="showhideship();">
<option value="">First Select Your Country</option>
<option value="38">Canada</option>
<option value="223">United States</option>
<option value="other">Other</option>
</select>
</p>
<p id="statewrap">
<label for="state">State: </label>
<select id="state" name="state">
<option value="">Then Select Your State</option>
<optgroup label="Canada" name="ctyCAN" id="ctyCAN">
<option value="66">Alberta</option>
<option value="67">British Columbia</option>
<option value="68">Manitoba</option>
</optgroup>
<optgroup label="United States" name="ctyUSA" id="ctyUSA">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="4">Arizona</option>
</optgroup>
</select>
</p>
<p id="countryotherwrap">
<label for="countryother">Country:</label>
<input type='text' id="countryother" name="countryother" value='' size="23" />
</p>
<p id="stateotherwrap">
<label for="stateother">State:</label>
<input type='text' id="stateother" name="stateother" value='' size="23" />
</p>
<p id="zipcodewrap">
<label for="zipcode">Zip Code:</label>
<input type='text' id="zipcode" name="zipcode" value='' size="8" />
</p>
</form>
</body>
</html>
Thanks for any help you can provide.
getElementById does not work on optgroup in IE 7?
Jan 28th, 2008, 23:11
Similar Threads
