多组同名选择框=

Question

现在我有三个不同的选择框部分，它们都是州或省或地区，无论如何......

我的表格是这样的......

国家[] 州/省[]

我通过选择前面的不同国家来更改州/省框中的默认信息，例如美国（纽约、佛罗里达）加拿大（阿尔伯特、新斯科舍）墨西哥（Yukatan、Northren）。

选择框的每个部分墨西哥、美国、加拿大都具有相同的名称，可以作为州/省提交到数据库中。但是，我相信它保留了我对其他国家的其他选择，即..为美国选择阿拉巴马州，然后切换到加拿大并选择艾伯塔省，它试图保存这两个国家，我怎样才能做到只选择一个？

太感谢了！

哦，下面是一些代码...

$(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

问题是您必须禁用不想提交的控件。
用这个替换你的脚本，一切都会被修复：

   $(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('');
      }); 
   });

这段代码的主要变化（除了现在有点短），是我们禁用非选定选择，所以他们没有提交。

并且建议，不要在同一页面中使用重复的 id。绝不。这也导致了一个问题，但现在它已经用我向您展示的代码修复了。

希望这有帮助，科里。干杯:)

Answer 2

您应该只使用一个 ，并每次将不同的选项集加载到该 中some 会在 字段上引发 onchange 事件。

您可以从 JSON 文件加载更改，您可以将其保存在服务器上。