1
Answer

Multiple drop down list using ajax

How to send multiple ajax request and process the multiple request one after the other and display returned data in respected drop down list 

Below is the ajax code to perform the subjected action but it is implemented in a manner of elaboration instead of do it with simple one.

Here implemented separate code for each ajax request and response.

please see the below code:

 
<html>  
<head>   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){               
$("#country").change(function(){                  
var country=$("#country").val();                    
$.ajax({                     
type:"post",                     
url:"getstate.php",                     
data:'typeId='+country,                     
success:function(data){                           
$("#state").html(data);                      
}                  
});              
});        
});   
</script>    
<script type="text/javascript">         
$(document).ready(function(){               
$("#state").change(function(){                   
var state=$("#state").val();                   
$.ajax({                     
type:"post",                     
url:"getdistrict.php",                     
data:'typeId='+state,                     
success:function(data){                           
$("#district").html(data);                     
}                  
});              
});        
});   
</script>    
<script type="text/javascript">
$(document).ready(function(){ 
$("#district").change(function(){    
var district=$("#district").val();   
$.ajax({                    
type:"post",            
url:"getward.php",              
data:'typeId='+district,     
success:function(data){                           
$("#ward").html(data);                    
}                  
});             
});        
});   
</script>    
<script type="text/javascript"> 
$(document).ready(function(){   
$("#ward").change(function(){   
var ward=$("#ward").val();    
$.ajax({                  
type:"post",                   
url:"getslum.php",               
data:'typeId='+ward,              
success:function(data){             
$("#slum").html(data);           
 }              
 });            
});       
});   
</script>    
</head> 
<body>   
Country : &nbsp;<select name="country" id="country">      
<option>-select your country-</option>     
<?php      
error_reporting(E_ALL);      
ini_set('display_errors', 1);    
include "dbconfig.php";      
$result=sqlsrv_query($conn,"SELECT [CountryId],[Country] from   toilet_Country order by Country");    
while($country=sqlsrv_fetch_array($result)){      
echo "<option value = $country[CountryId]>$country[Country]</option>";      
} ?>    
</select> <br><br> State :&emsp;&nbsp;&nbsp; <select name="state" id="state">
<option>-select your state-</option>     
</select> <br><br> District : &nbsp;&nbsp; <select name="district" id="district">    
<option>-select your District-</option>  
</select> <br><br> 
Ward : &nbsp;&nbsp; <select name="ward" id="ward">   
<option>-select your ward-</option>    
</select> <br><br>     
Slum : &nbsp;&nbsp; <select name="slum" id="slum"> 
<option>-select your slum name-</option>    
</select> <br><br>   
</body>   
</html>

And i have written code in separate files to retrieve country,state,district information from database.
I am unaware of these ajax call request and response and looking for advise how can i make this code portable.
Thanks in advance.

Answers (1)