Dependent Dropdown select - How to get "names" of city instead of the "id" into submit?

Question

I'm having a problem upon changing the code below "${region.code}" into "${region.name}"

regOpt += `<option value='${region.code}'> ${region.altName}</option>`; 

What I want is to get the names of the region instead of the value on submit form but the problem is when I change the value into name I'm getting errors and the 2nd & 3rd dropdown won't show. probably because I'm using multiple JSON file and it filter the values to connect the files.

JS

$(function(){
    let regOpt = "";
    let provOption = "";
    let cityOption = "";
        //FOR REGION
        $.getJSON('regions.json', function(result){         
            regOpt += `<option value="" disabled selected hidden>Region</option>`;
            $.each(result.sort(), function(i, region){
                regOpt += `<option value='${region.code}'> ${region.altName}</option>`;   
            }); 
            $('#region').html(regOpt);    
        });
        //FOR PROVINCE
        $('#region').change(function(){
            let values = $(this).val();      
        $.getJSON('provinces.json', function(result){
              let items = $(result).filter(function(i, n){
                return n.region === values;
            });
            provOption += `<option value="" disabled selected hidden>Province</option>`;
            //loop through dates
            $.each(items, function(region, province){
                provOption += `<option value='${province.code}'> ${province.name}</option>`;
            });
            $('#province').html(provOption);
        });   
    });
        //FOR CITY
        $('#province').change(function(){
            let values = $(this).val();
        $.getJSON('citiesMunicipalities.json', function(result){
            let items = $(result).filter(function(i, n){
                return n.province === values;
            });
            cityOption += `<option value="" disabled selected hidden>City</option>`;
            $.each(items, function(province, city){
                cityOption += `<option value='${city.code}'> ${city.name}</option>`;
            });
            $('#city').html(cityOption);       
        });
    });
});
</script>

HTML code

<div class="container form-group">
    <form action="" method="GET" id="addform">
        <div class="form-group">
            <select name="region" id="region">
                <option value="">Select Region</option>
            </select>
    </div>

    <div class="form-group">
        <select name="province" id="province">
            <option value=""> Select Province</option>
        </select>
    </div>
    
    <div class="form-group">
        <select name="city" id="city">
            <option value="">City</option>
        </select>
    </div>

    <div class="form-group">
        <button type="submit" form="addform" value="Submit">Submit</button> 
    </div>
    </form>
</div>

JSON files i'm using is here

Answer 1

You can store value of region code as data-attribute . So, whenever your region dropdown gets changed get value of this data attribute using $(this).find('option:selected').data("code"); and then pass same to your filter method .

Demo Code :

//this is for demo
var regions = [{
    "code": "130000000",
    "name": "National Capital Region",
    "altName": "NCR"
  },
  {
    "code": "140000000",
    "name": "Cordillera Administrative Region",
    "altName": "CAR"
  }
]
var provinces = [{
    "code": "130100000",
    "name": "Ab",
    "altName": null,
    "region": "130000000"
  },
  {
    "code": "140100000",
    "name": "Cd",
    "altName": null,
    "region": "140000000"
  },
  {
    "code": "142700000",
    "name": "Mn",
    "altName": null,
    "region": "140000000"
  }
]

$(function() {
  var regOpt = "";
  //FOR REGION
  /*$.getJSON('regions.json', function(result) {*/
  regOpt += `<option value="" disabled selected hidden>Region</option>`;
  $.each(regions.sort(), function(i, region) {
    //use data attr here..
    regOpt += `<option data-code ='${region.code}' value='${region.name}'> ${region.altName}</option>`;
  });
  $('#region').html(regOpt);
  /* });*/
  //FOR PROVINCE
  $('#region').change(function() {
    var provOption = "";
    //get data attribute values..
    let values = $(this).find('option:selected').data("code");
    console.log(values)
    /*$.getJSON('provinces.json', function(result) {*/
    let items = $(provinces).filter(function(i, n) {
      return n.region === $.trim(values);
    });
    provOption += `<option value="" disabled selected hidden>Province</option>`;
    //loop through dates
    $.each(items, function(region, province) {
      provOption += `<option value='${province.code}'> ${province.name}</option>`;
    });
    $('#province').html(provOption);
    /*});*/
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-group">
  <form action="" method="GET" id="addform">
    <div class="form-group">
      <select name="region" id="region">
        <option value="">Select Region</option>
      </select>
    </div>

    <div class="form-group">
      <select name="province" id="province">
        <option value=""> Select Province</option>
      </select>
    </div>

    <div class="form-group">
      <select name="city" id="city">
        <option value="">City</option>
      </select>
    </div>

    <div class="form-group">
      <button type="submit" form="addform" value="Submit">Submit</button>
    </div>
  </form>
</div>