select option generate value from ajax on change

Total Post:154

Points:1086
AJAX  JQuery  PHP 
 1321  View(s)
Ratings:
Rate this:

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

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

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

here is my ajax request

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

 

  1. Post:110

    Points:774
    Re: select option generate value from ajax on change

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

      Modified On Apr-08-2018 11:37:39 PM

Answer