thanks for all your valuable replies friends , finally i got solution using javascript.
working exactly for me ,
1.if we select country that selected country state only is populate in state dropdown.
2.if we select a state that state cities only populate in the cities drop down
My code :
Aspx :
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<td>
<asp:DropDownList runat="server" name="country" CssClass="form-control countries" ID="countryid" ValidationGroup="COUNTRY">
<asp:ListItem Value="Select Country" Text="Select Country"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList runat="server" ID="stateId" CssClass="form-control states" ValidationGroup="STATE">
<asp:ListItem Value="Select State" Text="Select State"></asp:ListItem>
</asp:DropDownList></td>
<td>
<asp:DropDownList runat="server" name="city" CssClass="form-control cities" ID="cityId" ValidationGroup="LOC">
<asp:ListItem Value="Select Location" Text="Select Location"></asp:ListItem>
</asp:DropDownList></td>
</tr>
Javaxcript:
<script src="http://iamrohit.in/lab/js/location.js">
function ajaxCall() {
this.send = function(data, url, method, success, type) {
type = type||'json';
var successRes = function(data) {
success(data);
}
var errorRes = function(e) {
console.log(e);
//alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
//$('#loader').modal('hide');
}
$.ajax({
url: url,
type: method,
data: data,
success: successRes,
error: errorRes,
dataType: type,
timeout: 60000
});
}
}
function locationInfo() {
var rootUrl = "http://iamrohit.in/lab/php_ajax_country_state_city_dropdown/api.php";
var call = new ajaxCall();
this.getCities = function(id) {
$(".cities option:gt(0)").remove();
var url = rootUrl+'?type=getCities&stateId=' + id;
var method = "post";
var data = {};
$('.cities').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.cities').find("option:eq(0)").html("Select City");
if(data.tp == 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', val).text(val);
option.attr('cityid', key);
$('.cities').append(option);
});
$(".cities").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
this.getStates = function(id) {
$(".states option:gt(0)").remove();
$(".cities option:gt(0)").remove();
var url = rootUrl+'?type=getStates&countryId=' + id;
var method = "post";
var data = {};
$('.states').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.states').find("option:eq(0)").html("Select State");
if(data.tp == 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', val).text(val);
option.attr('stateid', key);
$('.states').append(option);
});
$(".states").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
this.getCountries = function() {
var url = rootUrl+'?type=getCountries';
var method = "post";
var data = {};
$('.countries').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.countries').find("option:eq(0)").html("Select Country");
console.log(data);
if(data.tp == 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', val).text(val);
option.attr('countryid', key);
$('.countries').append(option);
});
$(".countries").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
}
$(function() {
var loc = new locationInfo();
loc.getCountries();
$(".countries").on("change", function(ev) {
var countryId = $("option:selected", this).attr('countryid');
if(countryId != ''){
loc.getStates(countryId);
}
else{
$(".states option:gt(0)").remove();
}
});
$(".states").on("change", function(ev) {
var stateId = $("option:selected", this).attr('stateid');
if(stateId != ''){
loc.getCities(stateId);
}
else{
$(".cities option:gt(0)").remove();
}
});
});
</script>
anyone need like my require use my code it is exact one ,
Pauil.S