So, I've got two radio buttons, one attached to a provinces array, so it displays all of Canada's provinces in a select menu when clicked. I've got a second radio button attached to a states array that will display a select menu when the United States is clicked. What I can't figure out is how to make the provinces disappear when the user changes from the Canada radio button to the United States button and have the states appear in its place. I'll skip posting the array, but here's the rest of the code:

PHP Code:
//in the HTML
<p><label><input type="radio" name="radio" value="Canada" onclick="createProvSelect('selectDiv', provinces);" />Canada</label></p>
<
p><label><input type="radio" name="radio" value="USA" onclick="createStateSelect('selectDiv', states);" />United States of America</label></p>
<
div id="selectDiv"></div>

//in .js document
function createProvSelect(divIdprovincesArray) {
var 
mySelect document.createElement("SELECT");
mySelect.setAttribute("name""province");
mySelect.setAttribute("id""province");
var 
newOption;
var 
newTextNode;
for (
0provincesArray[0].lengthi++) {
//create the new option
newOption document.createElement("OPTION");
//set the value of the new option. values are in provinces[1]
newOption.setAttribute("value"provincesArray[1][i]);
//make a new text node - that's the text that appears between the opening and closing option tags
//it is what you see in the pulldown menu choices
//text node items are in provinces[0]
newTextNode document.createTextNode(provincesArray[0][i]);
//append the text node to the option
newOption.appendChild(newTextNode);
//append the option to the select
mySelect.appendChild(newOption);
}
document.getElementById(divId).appendChild(mySelect);
}

function 
createStateSelect(divIdstatesArray) {
var 
mySelect document.createElement("SELECT");
mySelect.setAttribute("name""state");
mySelect.setAttribute("id""state");
var 
newUsaOption;
var 
newUsaTextNode;
for (
0statesArray[0].lengthi++) {
//create the new option
newUsaOption document.createElement("OPTION");
//set the value of the new option. values are in provinces[1]
newUsaOption.setAttribute("value"statesArray[1][i]);
//make a new text node - that's the text that appears between the opening and closing option tags
//it is what you see in the pulldown menu choices
//text node items are in provinces[0]
newUsaTextNode document.createTextNode(statesArray[0][i]);
//append the text node to the option
newUsaOption.appendChild(newUsaTextNode);
//append the option to the select
mySelect.appendChild(newUsaOption);
}
document.getElementById(divId).appendChild(mySelect);

Does anyone know how I'd alter this to get the desired results?