I have two select menus , the second select menu is dependent on the value of the first select menu. I am able to populate the second menu with the correct values but for some reason I cannot restrict which values are shown and when. When the user picks USA, I want the states associated with it to be shown, and when USA is not selected then I don't want those values shown. Here is my code.
Code:
<!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">
<head>
<script type="text/javascript" src="hrg_nonmember_includes/javascript/jquery.js"></script>
<script type="text/javascript">
<!-- <![CDATA[
$(function() {
});//closes the big funciton
// ]]> -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
<!-- <![CDATA[
var countryState = {
"usa":[{'al':'Alabama',
'ak':'Alaska',
'as':'American Samoa',
'az':'Arizona',
'ar':'Arkansas',
'ca':'California',
'co':'Colorado',
'ct':'Connecticut',
'de':'Delaware',
'dc':'District Of Columbia',
'fm':'Federated States Of Micronesia',
'fl':'Florida',
'ga':'Georgia',
'gu':'Guam',
'hi':'Hawaii',
'id':'Idaho',
'il':'Illinois',
'in':'Indiana',
'ia':'Iowa',
'ka':'Kansas',
'ky':'Kentucky',
'la':'Louisiana',
'me':'Maine',
'mh':'Marshall Islands',
'md':'Maryland',
'ma':'Massachusetts',
'mi':'Michigan',
'mn':'Minnesota',
'ms':'Mississippi',
'mo':'Missouri',
'mt':'Montana',
'ne':'Nebraska',
'nv':'Nevada',
'nh':'New Hampshire',
'nj':'New Jersey',
'nm':'New Mexico',
'ny':'New York',
'nc':'North Carolina',
'nd':'North Dakota',
'mp':'Northern Mariana Islands',
'oh':'Ohio',
'ok':'Oklahoma',
'or':'Oregon',
'pw':'Palau',
'pa':'Pennsylvania',
'ri':'Rhode Island',
'sc':'South Carolina',
'sd':'South Dakota',
'tn':'Tennessee',
'tx':'Texas',
'ut':'Utah',
'vt':'Vermont',
'vi':'Virgin Islands',
'va':'Virginia',
'wa':'Washington',
'wv':'West Virginia',
'wi':'Wisconsin',
'wy':'Wyoming'
}],//closes usa
"can":[{
'ab':'Alberta',
'bc':'British Columbia',
'mb':'Manitoba',
'nb':'New Brunswick',
'nl':'Newfoundland And Labrador',
'ns':'Nova Scotia',
'nu':'Nunavut',
'nt':'Northwest Territories',
'on':'Ontario',
'pe':'Prince Edward Island',
'qc':'Quebec',
'sk':'Saskatchewan',
'yt':'Yukon'
}],//closes canada
"eu":[{
'at':'Austria',
'be':'Belgium',
'bg':'Bulgaria',
'cy':'Cyprus',
'cz':'Czech Republic',
'dk':'Denmark',
'ee':'Estonia',
'fi':'Finland',
'fr':'France',
'de':'Germany',
'el':'Greece',
'hu':'Hungary',
'ie':'Ireland',
'it':'Italy',
'lv':'Latvia',
'lt':'Lithuania',
'lu':'Luxembourg',
'mt':'Malta',
'nl':'Netherlands',
'pl':'Poland',
'pt':'Portugal',
'ro':'Romania',
'sk':'Slovakia',
'si':'Slovenia',
'es':'Spain',
'se':'Sweden',
'uk':'United Kingdom'
}],//closes european union
"aust":[{
'act':'Australian Capital Territory',
'chr':'Christmas Island',
'coc':'Cocos Island',
'jb':'Jervis Bay',
'nsw':'New South Wales',
'nt':'Northern Territory',
'qld':'Queensland',
'sa':'South Australia',
'tas':'Tasmania',
'vic':'Victoria',
'wa':'Western Australia'
}]//closes australia
};//closes countryState
/*function countryStatus(){
var check =document.getElementById("country_id");
if( check.value == "default_country"){
document.getElementById("state_id").disabled=true;//alert(check);
}else{document.getElementById("state_id").disabled=false;
}
}closes checkStatus()*/
function stateValue(){
var country = document.getElementById("country_id").value;
var state= document.getElementById("state_id");
var opt;
var i=0;
var x=0;
var y=0;
state.disabled = true;
if(country != "default_country"){
state.disabled = false;
for(i in countryState[country]){
for(x in countryState[country][i]){
opt = document.createElement('option');
opt.value=[x];
opt.text=countryState[country][i][x];
state.add(opt,null);
}
state.remove(opt);
}
}else{state.disabled = true;}
return;
}//closes stateValue()
// ]]> -->
</script>
<!-- -->
<div id="contact_form">
<form name="contact" action="">
<select id="country_id" name="country_id" onblur="stateValue()">
<option selected="selected" value="default_country">Your Country</option>
<option value="usa">USA</option>
<option value="can">Canada</option>
<option value="eu">European Union</option>
<option value="aust">Australia</option>
</select>
<select id="state_id" name="state_id">
<option value="default_state" selected="selected">Select State</option>
</select>
</form>
</div>
<script type="text/javascript">
<!-- <![CDATA[
// ]]> -->
</script>
</body>
</html>
Linear Mode
