Dependent Dropdown list in Javascript, jQuery, Json & Ajax

Question

How can I make it so when I select an option it will only populate that one area? I only want the specific places in that area. example picture.]

Example of the output (1)

Example of the output (2)

this is the json code that I want to have a function and connect the two or more files.

json file 1

 {
    "code": "010000000",
    "name": "Ilocos Region",
    "altName": "Region I"
  }

json file 2

{
    "code": "012800000",
    "name": "Ilocos Norte",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "012900000",
    "name": "Ilocos Sur",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "013300000",
    "name": "La Union",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "015500000",
    "name": "Pangasinan",
    "altName": null,
    "region": "010000000"
  }

here is the code

html part

<div class="container form-group" style="width:600px; margin-top: 10vh">
    <form action="" method="GET" id="addform">
        <div class="form-group">
        <select name="region" id="region" class="form-control input-sm" required>
            <option value="">Select Region</option>
        </select>
    </div>

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

    </form>
</div>

<script>

$(function(){
    let regionOption;
    let provinceOption;
   
        //FOR REGION
        $.getJSON('regions.json', function(result){
            
            regionOption += `<option value="">Select Region</option>`;
            $.each(result, function(i, region){
                regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
            });
            $('#region').html(regionOption);    
        });
        //FOR PROVINCE
        $('#region').change(function(){
       
        $.getJSON('provinces.json', function(result){
            provinceOption += `<option value="">Select Province</option>`;
            $.each(result, function(region, province){
                provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
            });
            $('#province').html(provinceOption);
        });
        
    });
});
</script>

my failed attempt is this part :

$('#region').change(function(){
        if($(this).val() === $(this).val()){
        $.getJSON('provinces.json', function(result){
            provinceOption += `<option value="">Select Province</option>`;
            $.each(result, function(region, province){
                provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
            });
            $('#province').html(provinceOption);
        });
        }
    });

Answer 1

You can use .filter() to filter your json return inside ajax then inside this compare value of select-box with all values of region if they matches get that data . Finally loop through filter datas and show them inside your select-box.

Demo Code :

//just for demo :)
var result = [{
  "code": "010000000",
  "name": "Ilocos Region",
  "altName": "Region I"
}, {
  "code": "010000002",
  "name": "Ilocos Region2",
  "altName": "Region 2"
}]
var json2 = [

  {
    "code": "012800000",
    "name": "Ilocos Norte",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "012900000",
    "name": "Ilocos Sur",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "013300000",
    "name": "La Union",
    "altName": null,
    "region": "010000002"
  },
  {
    "code": "015500000",
    "name": "Pangasinan",
    "altName": null,
    "region": "010000002"
  }
]

$(function() {
  let regionOption;
  let provinceOption;

  //FOR REGION
  /* $.getJSON('regions.json', function(result) {*/

  regionOption += `<option value="">Select Region</option>`;
  $.each(result, function(i, region) {
    regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
  });
  $('#region').html(regionOption);
  /* });*/

  $('#region').change(function() {
    var values = $(this).val()
    var provinceOption = ""
    /*$.getJSON('provinces.json', function(json2) {*/
    //filter your json return..
    var items = $(json2)
      .filter(function(i, n) {
        return n.region === values; //get value where region is same
      });
    provinceOption += `<option value="">Select Province</option>`;
    //loop through dates
    $.each(items, function(region, province) {
      provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
    });
    $('#province').html(provinceOption);
    /*  });*/

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container form-group" style="width:600px; margin-top: 10vh">
  <form action="" method="GET" id="addform">
    <div class="form-group">
      <select name="region" id="region" class="form-control input-sm" required>
        <option value="">Select Region</option>
      </select>
    </div>

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

  </form>
</div>