WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

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

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery ajax() method

Populating the state or city dropdown based on the value of option selected by the user in the 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 along with the little help of any server side scripting language like PHP.

Let's take a look at the following example to understand how it basically works:

  • <!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>
  • $(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 the "process-request.php" file 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>";
  •     } 
  • }
  • ?>

We have created a simple PHP array to store country and city records for demo purpose. However, in real world scenario you need to store these records in database. Please check out the PHP and MySQL tutorial section to learn about inserting and retrieving records from database.


Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.