select option generate value from ajax on change

Question

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

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

Ajax Code

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

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

Arun P Johny · Accepted Answer · 2015-01-21T03:26:10.283

14

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

edited Jan 21 '15 at 03:26

answered Jan 21 '15 at 03:17

Arun P Johny

384,651
66
527
531

that was simple i thought i needed to make another ajax it was a waste of time i cant tick it for the next 10 mins rest assured i will tick so others can check the answer – Brownman Revival Jan 21 '15 at 03:19
Sir what edit did you made on the answer?is `$('#country')` different from `document.getElementById('country')`? – Brownman Revival Jan 21 '15 at 03:37
1

@HogRider since you are using jQuery.... it is the jQuery way... easy and less typing... also there is no need to call `$(country)` multiple times – Arun P Johny Jan 21 '15 at 03:38
how can i trigger the onchange event and not change the current data. I ask this because when i load the info from database it does not go to the correct info but it goes to the first entry in the list example i need to show `Japan` in the list for country but it will show the first country for asia which is `Afghanistan` same with city for this sample i need to show `Tokyo` it will show the first city of `Afghanistan` which is `Chaghcharan` – Brownman Revival Mar 17 '15 at 11:14
Sir if you have time please give an answer to my latest question – Brownman Revival Mar 18 '15 at 03:28
You will have to set those initial values after the values are loaded to the select element – Arun P Johny Mar 18 '15 at 03:29
i tried it sir..What i did is i get the value from database then set that value to the option menu (first continent) then i have the onchange for continent in order to populate the country then i set the database value for country then again make an onchange then set the value for city. But the value that is shown is the value of the first element. If i dont put the onchange it wont show value since it is not populated. I tried append it showed the correct value when `no onchange` `(meaning no other value in dropdown)`if there is onchange same problem showing the first element of the list – Brownman Revival Mar 18 '15 at 03:34
Sir can you give sample of how or what this is called i have been working on this for a week or so still no progress. – Brownman Revival Mar 25 '15 at 03:09
this is the problem i have let me start with how the data are load inorder for the select option to have values we have set them to be populated on change. But what if the data is from database since no onchange happens it will not be populated when i put on so that the select will have value thus it can be populated the problem is the value from the database is not the on that is select. the selected value is always the first value (alphabetically). I hope i am making clear if not please let go to chat so i can explain – Brownman Revival Mar 25 '15 at 03:44

score 0 · Answer 2 · edited Sep 04 '16 at 09:40

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

Get country list array
Get city list where countryid = country[0].id
Combine them and add another field like type

Example:

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

Then in 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...
    }
  }
});

select option generate value from ajax on change

2 Answers2