javascript - 相关下拉选择 - 如何获取城市的“名称”而不是“id”提交？

Question

将“${region.code}”下面的代码更改为“${region.name}”时遇到问题

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

我想要的是获取区域的名称而不是提交表单上的值，但问题是当我将值更改为名称时，我遇到了错误，并且第二个和第三个下拉列表不会显示。可能是因为我使用了多个 JSON 文件，并且它过滤了连接文件的值。

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

<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 文件在这里

标签： javascripthtmljsonajaxdropdown

Answer 1

您可以将区域代码的值存储为 data-attribute 。因此，每当您的区域下拉列表发生更改时，使用获取此数据属性的值，$(this).find('option:selected').data("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>