Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
35
rated 0 times [  40] [ 5]  / answers: 1 / hits: 90414  / 10 Years ago, wed, january 21, 2015, 12:00:00

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

More From » php

 Answers
82

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

[#68146] Sunday, January 18, 2015, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
myrap

Total Points: 407
Total Questions: 105
Total Answers: 109

Location: Cambodia
Member since Thu, Oct 7, 2021
3 Years ago
myrap questions
Tue, Feb 8, 22, 00:00, 2 Years ago
Wed, Jan 15, 20, 00:00, 4 Years ago
Thu, Oct 24, 19, 00:00, 5 Years ago
Thu, Oct 3, 19, 00:00, 5 Years ago
Mon, Aug 12, 19, 00:00, 5 Years ago
;