从Ajax中选择选项生成值的选择框更改事件

Question

我在这里有我的项目代码和流程，我有三个选择器，一个用于选择大洲，一个用于选择国家，另一个用于选择城市。我通过Ajax请求获取数据来填充这些选择器，现在它已经正常工作了，但我想让它更加美观，所以我想添加一些功能：

1.当选择大洲时，该大洲的国家列表将显示在国家列表中。当更改发生时，我希望城市也能显示当前国家第一个条目的城市, 目前它没有发生，我仍然需要更改国家选择器的条目才能显示城市列表。

2.问题是我是否需要在大洲的Ajax请求中添加另一个Ajax请求，我不确定这是否可行，我尝试了一下，目前还没有起作用。

Ajax代码：

$('.continentname').change(function() {
        var id = $(this).find(':selected')[0].id;
        //alert(id); 
        $.ajax({
            type:'POST',
            url:'../include/continent.php',
            data:{'id':id},
            success:function(data){
                // the next thing you want to do 
    var country= document.getElementById('country');
              $(country).empty();
    var city = document.getElementById('city');
              $(city).empty();
    for (var i = 0; i < data.length; i++) {
    $(country).append('<option id=' + data[i].sysid + ' value=' + data[i].name + '>' + data[i].name + '</option>');
    }
            }
        });

    });

$('.countryname').change(function() {
        var id = $(this).find(':selected')[0].id;
        $.ajax({
            type:'POST',
            url:'../include/country.php',
            data:{'id':id},
            success:function(data){
                // the next thing you want to do 
    var city = document.getElementById('city');
              $(city).empty();
    for (var i = 0; i < data.length; i++) {
    $(city).append('<option id=' + data[i].sysid + ' value=' + data[i].name + '>' + data[i].name + '</option>');
    }
            }
        });

    });

从数据库中取出的值，我把它放入下拉选项中，如下：

$("#continent").val(continentid);
$("#continent").change();
$("#country").change();
$("#country").val(countryid);
$("#city").val(cityid);

- Brownman Revival

Answer 1

您可以在国家元素填充后触发更改事件。

$('.continentname').change(function () {
    var id = $(this).find(':selected')[0].id;
    //alert(id); 
    $.ajax({
        type: 'POST',
        url: '../include/continent.php',
        data: {
            'id': id
        },
        success: function (data) {
            // the next thing you want to do 
            var $country = $('#country');
            $country.empty();
            $('#city').empty();
            for (var i = 0; i < data.length; i++) {
                $country.append('<option id=' + data[i].sysid + ' value=' + data[i].name + '>' + data[i].name + '</option>');
            }

            //manually trigger a change event for the contry so that the change handler will get triggered
            $country.change();
        }
    });

});

$('.countryname').change(function () {
    var id = $(this).find(':selected')[0].id;
    $.ajax({
        type: 'POST',
        url: '../include/country.php',
        data: {
            'id': id
        },
        success: function (data) {
            // the next thing you want to do 
            var $city = $('#city');
            $city.empty();
            for (var i = 0; i < data.length; i++) {
                $city.append('<option id=' + data[i].sysid + ' value=' + data[i].name + '>' + data[i].name + '</option>');
            }
        }
    });
});

- Arun P Johny

---

那很简单，我以为我需要再做一个Ajax，这浪费了我的时间。我现在不能勾选它，接下来的10分钟内请放心，我会勾选它，这样其他人就可以检查答案了。 - Brownman Revival

@HogRider，既然你正在使用jQuery……那就是jQuery的方式……简单而且少打字……而且没有必要多次调用$(country)。 - Arun P Johny

我该如何触发 onchange 事件而不更改当前数据？ 我问这个问题是因为当我从数据库加载信息时，它不会转到正确的信息，而是会转到列表中的第一个条目。例如，我需要在国家列表中显示“日本”，但它将显示亚洲的第一个国家“阿富汗”，对于城市也是如此，对于这个示例，我需要显示“东京”，它将显示“Afghanistan”的第一个城市“查赫恰兰”。 - Brownman Revival

在选择元素的值被加载后，您将需要设置这些初始值。 - Arun P Johny

我试过了，先从数据库获取值，然后将该值设置为选项菜单（第一个大洲），接着在大洲的onchange事件中填充国家，再将国家的数据库值设置为城市，最后再次触发onchange事件并设置城市的值。但是所显示的值却是第一个元素的值。如果不加onchange，那么由于没有填充数据，就不会显示任何值。我尝试使用append()方法，当没有onchange时（也就是下拉列表中没有其他值）可以正确显示值，但如果使用onchange，仍然会出现相同的问题，即显示列表中的第一个元素。 - Brownman Revival

Answer 2

您可以在../include/continent.php中获取第一个国家的国家列表和城市列表：

1. 获取国家列表数组
2. 获取其中countryid = country [0] .id的城市列表
3. 将它们合并并添加另一个字段，如type

示例：

type     | sysid | name
country  | 1     | America
country  | 2     | Canada
city     | 1     | New York
city     | 2     | Los Angles

然后在 JavaScript 中：

$.post("../include/continet.php", {"id":id}, function(data){
  $(country).empty();
  $(city).empty();
  for (var i = 0; i < data.length; i++) {
    if(data[i].type == "country"){
      $(country).append...
    }
    else{
      $(city).append...
    }
  }
});

- Bandon