filter select values base on first select id in jquery-CodePudding

I have a jquery code filter data base on given value of select, the problem is when I insert it to the database two field have pass same data the 'city' row and the 'brgy' couse they have same value given, is their a solution where the condition is not base on value given by select like id would be the condition. what area of jquery code should I modify? (note: I not good in jquery I also got this code in this platform.)

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

this is the working html using jQuery above

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

problem is it save incorrect data to the database.

CodePudding user response：

You can use data-attributes to achieve this.So, in your html instead of giving same values to option you can use data-any_name="value_in_common" to your options and then in your jquery code you can use $("#city [data-region='" val "']").show(); to show excepted options.

Demo Code :

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