How to populate state dropdown based on option selected in country dropdown using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery ajax() method

Populating the state or city dropdown based on the value of option selected by the user in country dropdown is a very common implementation of ajax feature that you have seen on many websites while filling the registration form. You can do this easily through the jQuery ajax() method and with the little help of any server side scripting language like PHP.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Populate City Dropdown Using jQuery Ajax</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("select.country").change(function(){
  •         var selectedCountry = $(".country option:selected").val();
  •         $.ajax({
  •             type: "POST",
  •             url: "process-request.php",
  •             data: { country : selectedCountry } 
  •         }).done(function(data){
  •             $("#response").html(data);
  •         });
  •     });
  • });
  • </script>
  • </head>
  • <body>
  • <form>
  •     <table>
  •         <tr>
  •             <td>
  •                 <label>Country:</label>
  •                 <select class="country">
  •                     <option>Select</option>
  •                     <option value="usa">United States</option>
  •                     <option value="india">India</option>
  •                     <option value="uk">United Kingdom</option>
  •                 </select>
  •             </td>
  •             <td id="response">
  •                 <!--Response will be inserted here-->
  •             </td>
  •         </tr>
  •     </table>
  • </form>
  • </body> 
  • </html>

The jQuery script above send the value of option selected in the country dropdown to the server. The "process-request.php" file on the server then process the request, if the request succeeds the jQuery script receives the returned data and creates the city dropdown list.

The PHP code inside "process-request.php" will look something like this:

Example

Download
  • <?php
  • if(isset($_POST["country"])){
  •     // Capture selected country
  •     $country = $_POST["country"];
  •      
  •     // Define country and city array
  •     $countryArr = array(
  •                     "usa" => array("New Yourk", "Los Angeles", "California"),
  •                     "india" => array("Mumbai", "New Delhi", "Bangalore"),
  •                     "uk" => array("London", "Manchester", "Liverpool")
  •                 );
  •      
  •     // Display city dropdown based on country name
  •     if($country !== 'Select'){
  •         echo "<label>City:</label>";
  •         echo "<select>";
  •         foreach($countryArr[$country] as $value){
  •             echo "<option>". $value . "</option>";
  •         }
  •         echo "</select>";
  •     } 
  • }
  • ?>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.