I am taking an introductory class in javascript and am working on an assignment. I am using radio buttons to make a drop down of the provinces and states. You can pick on or the other. When you pick one I want the other one to disappear. Right now it just keeps making drop downs over and over again. Can anyone give me some help please.
This is my JS
//*******************************************************************************************************//
var provinces = new Array(2);//Canadian Provinces and Territories
provinces[0] = new Array("Alberta", "British Columbia", "Manitoba", "New Brunswick", "Newfoundland", "Nova Scotia", "Ontario", "Prince Edward Island", "Quebec", "Saskatchewan", "Northwest Territories", "Nunavut", "Yukon Territory");
provinces[1] = new Array("AB", "BC", "MB", "NB", "NL", "NS", "ON", "PE", "QC", "SK", "NT", "NU", "YT");
var states = new Array(2);//American States
states[0] = new Array("Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming");
states[1] = new Array("AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "MD", "MA", "MI", "MN", "MS", "MO", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY");
function createSelect(divId, provincesArray) {
var mySelect = document.createElement("SELECT");
var newOption;
var newTextNode;
var removeTextNode;
for (i = 0; i < provincesArray[0].length; i++) {//creat a new option
newOption = document.createElement("OPTION");//set the value of the new option.
newOption.setAttribute("value", provincesArray[1][i]);//create a new text node
newTextNode = document.createTextNode(provincesArray[0][i]);//attach the select node to the option chosen
newOption.appendChild(newTextNode);
mySelect.appendChild(newOption);
if (document.getElementById('province')){
document.getElementById(divId).removeChild(document.getElementById('province'))
}
if (document.getElementById('states')){
document.getElementById(divId).removeChild(document.getElementById('states'))
}
document.getElementById(divId).appendChild(mySelect);
}
}
And the body of my HTML which is just a basic radio selection
<body>
<div id="page_box">
<div id="java_box6"></div>
<h3><a href="../../index.html">Home Page</a></h3>
<h2>Assignment 16- Create a select element using the DOM</h2>
<div id="java_box5">
<div id="selectDiv">
<p><input type="radio" name="selectButton" value="Canadian Provinces" onclick="createSelect('selectDiv', provinces);" />Canadian Provinces</label></p>
<p><input type="radio" name="selectButton" value="USD Stages" onclick="createSelect('selectDiv', states);" />USD States</label></p>
</div>
</div>
</div>
</body>
Thank you for any feed back you might have. Looking at it for hours and I need a new set of eyes to help me out.