Dynamic Dependent Select Box using Ajax in WordPress

Today  i will explain how to create a dynamic dependent select box which fetches records from database without reload the page,  this can be achieved using jQuery and Ajax, using Ajax in WordPress. We can submit and receive data using jQuery, and Ajax will handle server side request.

Let's Start....

1. Create two tables of country and city:-

    CREATE TABLE IF NOT EXISTS `country` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name`  

varchar(50) NOT NULL, PRIMARY KEY (`country_id`) );

CREATE TABLE IF NOT EXISTS `city` ( `city_id` int(11) NOT NULL AUTO_INCREMENT, `city_name` varchar(50)

  NOT NULL, `country_id` int(11) NOT NULL, PRIMARY KEY (`city_id`) ); 

 

2. Create a plugin to use Ajax in WordPress:-

  Create a new folder in wp-content/plugins/  Name of ajax-cities. just remember that plugin folder and file name will be same, i used ajax-cities/ folder name and ajax-cities.php file name in this folder. And activate the plugin.

 

 

3. Create main plugin file name ajax-cities.php:

 

Make ajax-cities folder in wordpress\wp-content\plugins\ajax-cities   and make one php file in same folder name of ajax-cities.php and put this following code  

ajax-cities.php 

<?php
/**
 * Plugin Name: Ajax Cities
 * Description: Allows to select cities according to the country
 * Version: 1.0.0
 * Author: Jayesh Borase
 * License: GPL2
 */

add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
    wp_enqueue_script( 'ajax-script', plugins_url( '/cities.js', __FILE__ ), array('jquery'));
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' )));
}

function my_action() {
$country_id = $_REQUEST['id'];
global $wpdb;
$cities = $wpdb->get_results($wpdb->prepare("SELECT * FROM city WHERE country_id='".$country_id."'",13,'gargle'),ARRAY_A);
foreach($cities as $city)
{ ?>
<option value="<?php echo $city["city_id"]; ?>"><?php echo $city["city_name"]; ?></option>
<?php }
die();
}
add_action('wp_ajax_my_action', 'my_action' );
add_action('wp_ajax_nopriv_my_action', 'my_action');
?>

 

4. Create Ajax file to handle request with name cities.js

 Make One .js file in same folder name of cities.js and past following code.

(function($) {
$(document).ready(function(){
    $('.country').change(function(){  
    var country_id = $(this).val();
    $.ajax({
            cache: false,
            type: "POST",
            url: ajax_object.ajax_url,
            data: {
                action : 'my_action',
                id : country_id,
                   },
            success: function(citydata)
                {
                jQuery('.city').html(citydata);
                }
            });
    });
});
})(jQuery);

 

  Note:-  These are the two files which are placed in our ajax-cities plugin.

 

5. Publish a template page with HTML form of country and    city select drop down list

Create a page in your theme folder with name page-select-country.php and paste the below code.using this below code in your dashboard you can see in Template the same option of theme name.

<?php

/**
 * Template Name: dropdown
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>
<div id="contents">
<h1>Select Country</h1><br/><br/>
<form name="form" method="post" action="">
<label>Country: </label><select name="country" class="country">
<option>Select Country</option>
<?php
global $wpdb;
$countries = $wpdb->get_results($wpdb->prepare("SELECT * FROM country",13,'gargle'),ARRAY_A);
foreach($countries as $country)
{ ?>          
<option value="<?php echo $country["country_id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php } ?>
</select>
<label>City: </label><select name="city" class="city">
<option>Select City</option>
</select>
</form>
</div>
<?php get_footer(); ?>

 

 

Select your Template and publish the page.

  Final Output:-