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

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>

这是工作 html 使用上面的 jQuery

<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

您可以使用数据属性来实现 this.So，在您的 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>

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

filter select values base on first select id in jquery

jquery

jquery-ui