在更改时，选择选项从ajax生成值

I have here the code and flow of my project i have 3 select here one for continent one for country one for city i get data to populate these select from ajax request it is now working fine i just want to make a bit fancy so i want to have a few function

这里的代码和流我的项目我有三个选择一个大陆一个国家一个城市我从ajax请求获取数据来填充这些选择现在工作很好,我只是想让有点花哨,所以我想有几个功能

1.When Continent is select the list of country for that continent is listed in the country list when the change happens I want the city to also show the cities of the first entry in the country currently it does not happened what i do is i still need to change the entry in country select to show the list of cities

1。当大陆选择大陆的国家列表中列出的国家列表当变化发生时我想让这个城市也显示当前城市的第一项国家不会发生我所做的是我仍然需要改变国家选择的条目显示城市的列表

2.Question is do i need to add another ajax request inside the ajax request for continent i am not sure this one is feasible i tried it, it is not working for now

2。问题是，我是否需要在ajax请求中添加另一个ajax请求?我不确定这个是否可行

Ajax Code

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>');
    }
            }
        });

    });

From database i put the value into the option select like

从数据库中，我将值放入选项select like中

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

2 个解决方案

#1

You can trigger a change event for the country element once it is populated

一旦填充了国家元素，就可以触发更改事件。

$('.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>');
            }
        }
    });
});

#2

You can get both country list and city list of first country in ../include/continent.php:

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

1. Get country list array
2. 得到数组国家列表
3. Get city list where countryid = country[0].id
4. 获取countryid = country[0].id的城市列表
5. Combine them and add another field like type
6. 合并它们并添加另一个字段，比如type

Example:

例子:

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

Then in javascript:

然后在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...
    }
  }
});