Javascript、jQuery、Json 和 Z3EB7106C3477A60E6BBF5DBFDE1DA5 中的相關下拉列表

Question

當我使用 select 選項時，我怎樣才能做到這一點，它只會填充那個區域？ 我只想要那個地區的特定地點。 示例圖片。]

output 示例 (1)

output 示例 (2)

這是 json 代碼，我想要一個 function 並連接兩個或多個文件。

json 文件 1

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

json 文件 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"
  }

這是代碼

html 零件

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

我失敗的嘗試是這部分：

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

您可以使用.filter()在 ajax 中過濾您的 json 返回，然后在選擇框的此比較值與region的所有值（如果它們匹配）中獲取該數據。 最后循環過濾數據並將它們顯示在您的選擇框中。

演示代碼：

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