Multiple Sets Of Select Boxes With Same Name= - php

Question

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>

Answer 1

The problem is that you must disable controls that don't want to be submitted.
Replace your script by this one, and everything will'be fixed:
$(document).ready(function(){
$("#country").change(function(){
//We first disable all, so we dont submit data for more than 1 country
$("#usStates, #caStates, #mexStates").hide().find("#state1").attr("disabled", true);
var $divSelectedStates;
if ($("#country").val() == 'United States')
$divSelectedStates = $("#usStates");
if ($("#country").val() == 'Canada')
$divSelectedStates = $("#caStates");
if ($("#country").val() == 'Mexico')
$divSelectedStates = $("#mexStates");
//We now enable only for the selected country
$divSelectedStates.show().find("#state1").attr("disabled", false).val('');
});
});
The main change in this code (besides it's a little shorter now), is that we're disabling non selected selects, so they are not submitted.
And and advice, don't use repeated id's in the same page. NEVER. This was causing a problem, also, but now it's fixed with the code i showed you.
Hope this helps, Cory. Cheers :)

Answer 2

You should just use a single <select id="state" name="state">, and load different set of options into that <select> each time some causes an onchange event on the <select id="country" name="country"> field.
You could load the changes from JSON files, which you can keep already prepared on your server.