Append from separate dom element two new "fake" select boxes for State/Province
Make Country changes twiddle whether State or Province appears
Make State/Province changes affect separate "STATE" field. This is the "real" field
Reset State if the user picks a random country (Not US or CA)
Initialize properly if the coutnry/State are already filled in. This assumes Coutnry is automatically selected.
Real State Field from SFDC
//get fakefield html and stick it in the same container as Country (at the end)
var fakeFields = $("#fakeFields").html();
$("#Country").parent().append( fakeFields );
//what to do when the user changes the country?
$("#Country").change( function() {
resetStates();
showHideDropDowns($(this).find("option:selected").attr("value"));
});
//What to do when the user picks a state/province?
$("#fakeState,#fakeProvince").change( function() {
updateState($(this).find("option:selected").attr("value"));
});
var stateVal = $("#State").attr("value");
initState(stateVal);
});
function initState(stateVal) {
showHideDropDowns($("#Country").find("option:selected").attr("value"));
var selectedOption = $("#fakeState:visible,#fakeProvince:visible").find("option[value=" + stateVal + "]")[0].index
$("#fakeState:visible,#fakeProvince:visible")[0].selectedIndex = selectedOption;
}
//Show the proper sub-menu for US or Canada
function showHideDropDowns(val) {
switch(val)
{
case "US":
$("#fakeState").show();
break;
case "CA":
$("#fakeProvince").show();
break;
default:
}
}
//Put everything back to "null"
function resetStates() {
$("#fakeState,#fakeProvince").hide();
$("#fakeState")[0].selectedIndex = 0;
$("#fakeProvince")[0].selectedIndex = 0;
$("#State").attr("value","");
}
//Put the value of the drop down into the actual hidden state field
function updateState(val) {
$("#State").attr("value",val);
}