Home > DeveloperSection > Forums > select option generate value from ajax on change
Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    January-20-2015 10:05 PM

 JavaScript AJAX  JQuery  PHP 
Ratings:


 1 Reply(s)
 590  View(s)
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>');

    }

            }

        });

 



Jayden Bell
Jayden Bell

Total Post:105

Points:739
Posted on    January-20-2015 10:38 PM

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


Don't want to miss updates? Please click the below button!

Follow MindStick