jQuery三级联动下拉选值重复致入库错误，如何改为按ID过滤？

需要修改的核心部分 #

你需要同时调整HTML属性规则和jQuery联动匹配逻辑两部分，修改后可以实现「联动逻辑靠id匹配、提交value为自身真实入库值」的需求，避免重复问题。 #

1. 先调整HTML属性规则 #

注意：HTML规范要求id属性必须全局唯一，你原有代码里brgy的多个option共用相同id属于错误写法，我们改用自定义关联属性实现绑定，更符合规范：

• region的option：value存要入库的地区名称，id设为唯一标识
• city的option：value存要入库的城市名称，新增data-region-id属性存储对应上级region的option的id，自身id设为唯一标识
• brgy的option：value存要入库的 barangay 名称，新增data-city-id属性存储对应上级city的option的id

调整后的HTML示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
  <option value="">Please Select Your Region</option>
  <option value="CompostelaValey" id="CompostelaValey">CompostelaValey</option>
  <option value="DavaoOriental" id="DavaoOriental">DavaoOriental</option>
 </select>
</p><br><br>

<p>SELECT YOUR THE CITY
 <select type="text" name="city" id="city">
   <option value="">Please Select City/Municipality</option>
  <option value="Baganga" data-region-id="DavaoOriental" id="Baganga">Baganga</option>
  <option value="Maragusan" data-region-id="CompostelaValey" id="Maragusan">Maragusan</option>
  <option value="MatiCity" data-region-id="DavaoOriental" id="MatiCity">MatiCity</option>
  </select>
</p><br><br>

<p>SELECT YOUR THE BARANGAY
  <select type="text" name="brgy" id="brgy">
    <option value="">Please Select Your Barangay</option>
   <option value="Baculin" data-city-id="Baganga">Baculin</option>
    <option value="Batawan" data-city-id="Baganga">Batawan</option>
   <option value="Batiano" data-city-id="Baganga">Batiano</option>
    <option value="Binondo" data-city-id="Baganga">Binondo</option>
    <option value="Bobonao" data-city-id="Baganga">Bobonao</option>
   <option value="Campawan" data-city-id="Baganga">Campawan</option>
   <option value="Central" data-city-id="Baganga">Central</option>
   <option value="Dapnan" data-city-id="Baganga">Dapnan</option>
    <option value="Kinablangan" data-city-id="Baganga">Kinablangan</option>
   <option value="Lambajon" data-city-id="Baganga">Lambajon</option>
   <option value="Lucod" data-city-id="Baganga">Lucod</option>
   <option value="Mahan-ub" data-city-id="Baganga">Mahan-ub</option>
   <option value="Mikit" data-city-id="Baganga">Mikit</option>
  <option value="Central" data-city-id="MatiCity">Central</option>
   <option value="Badas" data-city-id="MatiCity">Badas</option>
   <option value="Matiao" data-city-id="MatiCity">Matiao</option>
   <option value="kalapagan" data-city-id="Maragusan">kalapagan</option>
</select>
</p><br><br>

2. 修改jQuery代码的匹配逻辑 #

原有jQuery代码里的关联匹配是基于value属性，现在改成基于选中项的id和自定义关联属性匹配即可，修改后的完整代码：

$(document).ready(function() {
  $("#city option").hide();
  $("#brgy option").hide();

  $("#region").change(function() {
    // 取当前选中地区的id作为关联值
    var regionId = $(this).find(":selected").prop("id");
    $("#city option").hide();
    $("#city").val("");
    // 匹配对应上级地区的城市选项显示
    $("#city option[data-region-id='" + regionId + "']").show();
    $("#city").change();
  });

  $("#city").change(function() {
    // 取当前选中城市的id作为关联值
    var cityId = $(this).find(":selected").prop("id");
    $("#brgy option").hide();
    $("#brgy").val("");
    // 匹配对应上级城市的 barangay 选项显示
    $("#brgy option[data-city-id='" + cityId + "']").show();
  });
});

修改完成后，三个下拉框的value属性存储的都是自身要入库的真实内容，联动逻辑完全靠id和关联属性匹配，不会再出现提交值重复的问题。

内容的提问来源于stack exchange，提问作者jhunlio