根据 jquery 中的第一个选择 id 过滤选择值

Question

我有一个基于给定 select 值的 jquery 代码过滤器数据库，问题是当我将它插入数据库时​​，两个字段传递了相同的数据，“city”行和“brgy”因为它们具有相同的值，是他们的解决方案，其中条件不基于 select 给出的值，例如 id 将是条件。我应该修改 jquery 代码的哪个区域？ （注意：我jquery不好，这个平台也有这个代码。）

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

      $("#region").change(function() {
        var val = $(this).val();
        $("#city option").hide();
       $("#city").val("");
       $("#city option[value='" + val + "']").show();
       $("#city").change();
     });

     $("#city").change(function() {
       var val = $(this).find(":selected").prop("id");
       $("#brgy option").hide();
      $("#brgy").val("");
      $("#brgy option[value='" + val + "']").show();
     });

     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" value="" id="region">
        <option value="">Please Select Your Region</option>
        <option value="" id="CompostelaValey">CompostelaValey</option>
        <option value="" id="DavaoOriental">DavaoOriental</option>
      </select>
    
      <select type="text" name="city" id="city">
        <option value="">Please Select City/Municipality</option>
    
        <option value="" id="Baganga">Baganga</option>
        <option value="" id="Maragusan">Maragusan</option>
        <option value="" id="MatiCity">MatiCity</option>
      </select>
    
      <select type="text" id="brgy">
        <option value="">Please Select Your Barangay</option>
        <option value="" id="Baganga">Baculin</option>
        <option value="" id="Baganga">Batawan</option>
        <option value="" id="Baganga">Batiano</option>
        <option value="" id="Baganga">Binondo</option>
        <option value="" id="Baganga">Bobonao</option>
        <option value="" id="Baganga">Campawan</option>
        <option value="" id="Baganga">Central</option>
        <option value="" id="Baganga">Dapnan</option>
        <option value="" id="Baganga">Kinablangan</option>
        <option value="" id="Baganga">Lambajon</option>
        <option value="" id="Baganga">Lucod</option>
        <option value="" id="Baganga">Mahan-ub</option>
        <option value="" id="Baganga">Mikit</option>
        <option value="" id="MatiCity">Central</option>
        <option value="" id="MatiCity">Badas</option>
        <option value="" id="MatiCity">Matiao</option>
        <option value="" id="Maragusan">kalapagan</option>
      </select>

这是上面使用 jQuery 的工作 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">CompostelaValey</option>
      <option value="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="DavaoOriental" id="Baganga">Baganga</option>
      <option value="CompostelaValey" id="Maragusan">Maragusan</option>
        <option value="DavaoOriental" id="MatiCity">MatiCity</option>
      </select>
    </p><br><br>

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

问题是将不正确的数据保存到数据库中。

Answer 1

您可以使用数据属性来实现这一点。因此，在您的 html 中，您可以使用 data-any_name="value_in_common" 来代替您的选项，而不是为选项提供相同的值，然后在您的 jquery 代码中您可以使用 $("#city [data-region='" + val + "']").show(); 来显示例外选项.

演示代码：

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

  $("#region").change(function() {
    var val = $(this).val();
    $("#city option").hide();
    $("#city").val("");
    $("#city [data-region='" + val + "']").show(); //show options where attribute value matches.
    $("#city").change();
  });

  $("#city").change(function() {
    var val = $(this).find(":selected").val();
    $("#brgy option").hide();
    $("#brgy").val("");
    $("#brgy [data-city='" + val + "']").show();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="region">
  <option value="">Please Select Your Region</option>
  <option value="CompostelaValey">CompostelaValey</option>
  <option value="DavaoOriental">DavaoOriental</option>
</select>
<!--added data attribute-->
<select name="city" id="city">
  <option value="">Please Select City/Municipality</option>
  <option data-region="DavaoOriental" value="Baganga">Baganga</option>
  <option data-region="CompostelaValey" value="Maragusan">Maragusan</option>
  <option data-region="DavaoOriental" value="MatiCity">MatiCity</option>
</select>
<!--added data attribute-->
<select id="brgy">
  <option value="">Please Select Your Barangay</option>
  <option value="Baculin" data-city="Baganga">Baculin</option>
  <option value="Batawan" data-city="Baganga">Batawan</option>
  <option value="Binondo" data-city="Baganga">Binondo</option>
  <option value="Central" data-city="MatiCity">Central</option>
  <option value="Badas" data-city="MatiCity">Badas</option>
  <option value="Matiao" data-city="MatiCity">Matiao</option>
  <option value="kalapagan" data-city="Maragusan">kalapagan</option>
</select>