多组同名选择框=

Question

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

我的表格是这样的……

国家[] 州/省[]

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

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

非常感谢！

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

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

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

并且建议，不要在同一页面中使用重复的 id。绝不。这也导致了一个问题，但现在它已经用我给你看的代码解决了。

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

Answer 2

您应该只使用一个<select id="state" name="state">，并将不同的选项集加载到该<select> 中，每次某些导致<select id="country" name="country"> 字段上的onchange 事件时。

您可以从 JSON 文件加载更改，您可以在服务器上准备好这些文件。