Right now I have three different select box sections, they are all states or provinces or territories, anyways...
My form is like this...
Country[] States/Province[]
I change the default info in the state/province box by selecting different countries before it, such as USA(new york, florida) Canada(Albert, Nova Scotia) Mexico(Yukatan, Northren).
Each section of select boxes Mexico, USA, Canada all have the same name to submit into the database as a state/province. But, I believe its keeping my other selections of the other countries ie.. Select Alabama for USA and then Switch to Canada and pick Alberta, it tries to save both of them, how can I make it where only one will be chosen?
Thank you so much!
oh, here is some code below...
$(document).ready(function(){
$("#country").change(function()
{
$("#usStates").hide();
$("#caStates").hide();
$("#mexStates").hide();
if ($("#country").val() == 'United States'){
$("#usStates").show();
$("#caStates").hide();
$("#mexStates").hide();
$("#state1").val('');
}
if ($("#country").val() == 'Canada'){
$("#caStates").show();
$("#usStates").hide();
$("#mexStates").hide();
$("#state1").val('');
}
if ($("#country").val() == 'Mexico'){
$("#mexStates").show();
$("#caStates").hide();
$("#usStates").hide();
$("#state1").val('');
}
}); });
<div id="caStates" style="display: none;">
<div class="leftform">State / Province:</div>
<div class="rightform"><select class="select" style="width: 150px;" id="state1" name="state" size="1">
<option value=""></option>
<option value="Alberta">Alberta</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="British Columbia">British Columbia</option>
<option value="Newfoundland">Newfoundland</option>
<option value="Ontario">Ontario</option>
<option value="Quebec">Quebec</option>
<option value="Manitoba">Manitoba</option>
</select></div><br clear="all"/>
</div>
<div id="mexStates" style="display: none;">
<div class="leftform">State / Province:</div>
<div class="rightform"><select class="select" style="width: 150px;" id="state1" name="state" size="1">
<option value=""></option>
<option value="Baja California">Baja California</option>
<option value="Central Mexico">Central Mexico</option>
<option value="Gulf of Mexico">Gulf of Mexico</option>
<option value="Northern Mexico">Northern Mexico</option>
<option value="Mexico Pacific Coast">Mexico Pacific Coast</option>
<option value="Yucatan">Yucatan</option>
</select></div><br clear="all"/>
</div>