Title: Chained select with jquery
Last modified: September 1, 2016

---

# Chained select with jquery

 *  Resolved [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/)
 * I am trying to get this tutorial to work in WordPress. I am not able to get it
   to update the second drop down box. how-to-create-chained-select-with-php-and-
   jquery/ Getting error Undefined index: id For now I am just running it in my 
   header file and the other two files are in my theme folder. One person on there
   recommended changing the line to point to “[http://mysite.com/wp-content/themes/my-theme-name/select_type.php&#8221](http://mysite.com/wp-content/themes/my-theme-name/select_type.php&#8221);
   and that didn’t work.

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659030)
 * You’ll have to show us a Webpage with the issue, or demonstrate the issue using
   jsFiddle
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659038)
 * The tutorial is not available anymore in english but is still available in italian
   at this link [http://www.yourinspirationweb.com/2010/09/09/come-realizzare-delle-select-concatenate-con-php-e-jquery/](http://www.yourinspirationweb.com/2010/09/09/come-realizzare-delle-select-concatenate-con-php-e-jquery/).
   I can’t demonstrate you it by jsFiddle because there are database query to get
   data from wordpress database. I would like to use that chained select on wordpress.
   There was the same topic posted by [@bloke](https://wordpress.org/support/users/bloke/)
   member. Hope he can help me how can I get $POST query between selects. Thanks
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659042)
 * Here there is the download of the working example anyway [http://www.yourinspirationweb.com/?ddownload=15305](http://www.yourinspirationweb.com/?ddownload=15305)
   but I’m not able to have the same behavior on wordpress.
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659152)
 * Ok, I’ve done a live demo here [http://chainedselect.altervista.org](http://chainedselect.altervista.org)
 * I’ve installed a free theme (responsive boat) and I set up the tutorial code 
   on it (of course I’ve modified some code to make it working on wordpress).
 * 2 files:
    -html code is in themes->responsiveboat->sections->big_title.php -js
   code is in themes->responsiveboat->header.php
 * I’ve imported 3 tables (regioni, province, comuni) in wordpress database.
 * I’ve created a folder “select” in wp-content where there is the file select.class.
   php.
 * Here the code:
 * sections->big_title.php
 *     ```
       <?php include_once( ABSPATH . 'wp-content/select/select.class.php' ); ?>
   
       <div id="container">
   
       	<h1>La cascata regioni - province - comuni</h1>
       	<h2>Seleziona una regione e nella select successiva compariranno le province di quella regione</h2>
       	<h3>Selezionando una provincia, nella select successiva compariranno i comuni di quella provincia</h3>
   
       	<form action="" method="POST" id="myform">
       		Seleziona una regione:<br />
   
       			<?php ShowRegioni(); ?>
   
       		<br /><br />
   
       		Seleziona una provincia:<br />
   
       			<?php ShowProvince(); ?>
   
       		<br /><br />
   
       		Seleziona un comune:<br />
   
       			<?php ShowComuni(); ?>
   
       	</form>
   
       </div><!--end container-->
       ```
   
 * header.php
 *     ```
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
           <script type="text/javascript">
       	$(document).ready(function(){
   
       		var scegli = '<option value="0">Scegli...</option>';
       		var attendere = '<option value="0">Attendere...</option>';
   
       		$("select#province").html(scegli);
       		$("select#province").attr("disabled", "disabled");
       		$("select#comuni").html(scegli);
       		$("select#comuni").attr("disabled", "disabled");
   
       		$("select#regioni").change(function(){
       			var regione = $("select#regioni option:selected").attr('value');
       			$("select#province").html(attendere);
       			$("select#province").attr("disabled", "disabled");
       			$("select#comuni").html(scegli);
       			$("select#comuni").attr("disabled", "disabled");
   
       			$.post("select.php", {id_reg:regione}, function(data){
       				$("select#province").removeAttr("disabled");
       				$("select#province").html(data);
       			});
       		});	
   
       		$("select#province").change(function(){
       			$("select#comuni").attr("disabled", "disabled");
       			$("select#comuni").html(attendere);
       			var provincia = $("select#province option:selected").attr('value');
       			$.post("select.php", {id_pro:provincia}, function(data){
       				$("select#comuni").removeAttr("disabled");
       				$("select#comuni").html(data);
       			});
       		});
       	});
   
       	</script>
       ```
   
 * wp-content/select/select.class.php
 *     ```
       <?php
   
       	function ShowRegioni() {
       		global $wpdb;
       		$query = "SELECT * FROM {$wpdb->prefix}regioni";
       		$results_regione = $wpdb->get_results($query);
       		echo '<select id="regioni">';
       		echo '<option value="0">Scegli...</option>';
   
       		foreach($results_regione as $row) {
       	        $regione_id = $row->id_reg;
       	        $regione_name = $row->nome_regione;
       	        echo '<option value='.$regione_id.'>'.$regione_name.'</option>';
       	    }
   
       	    echo '</select>';
   
       	}
   
       	function ShowProvince() {
       		global $wpdb;
       		$query = "SELECT * FROM {$wpdb->prefix}province WHERE id_reg=$_POST[id_reg]";
       		$results_provincia = $wpdb->get_results($query);
       		echo '<select id="province">';
       		echo '<option value="0">scegli...</option>';
   
       		foreach($results_provincia as $row) {
       	        $provincia_id = $row->id_pro;
       	        $provincia_name = $row->nome_provincia;
       	        echo '<option value='.$provincia_id.'>'.$provincia_name.'</option>';
       	    }
   
       	    echo '</select>';
   
       	}
   
       	function ShowComuni() {
       		global $wpdb;
       		$query = "SELECT * FROM {$wpdb->prefix}comuni WHERE id_pro=$_POST[id_pro]";
       		$results_provincia = $wpdb->get_results($query);
       		echo '<select id="comuni">';
       		echo '<option value="0">scegli...</option>';
   
       		foreach($results_comune as $row) {
       	        $comune_id = $row->id_com;
       	        $comune_cap = $row->cap;
       	        echo '<option value='.$comune_id.'>'.$comune_cap.'</option>';
       	    }
   
       	    echo '</select>';
   
       	}
   
       ?>
       ```
   
 * You can see that the first select works correctly but the others get errors.
 * second select shown errors:
 *     ```
       Notice: Undefined index: id_reg in /membri/chainedselect/wp-content/select/select.class.php on line 22
       Errore sul database di WordPress: [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1]
       SELECT * FROM wp_province WHERE id_reg=
       ```
   
 * Third select shown errors:
 *     ```
       Notice: Undefined index: id_pro in /membri/chainedselect/wp-content/select/select.class.php on line 39
       Errore sul database di WordPress: [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1]
       SELECT * FROM wp_comuni WHERE id_pro=
       ```
   
 * So it seems $POST doesn’t works.
 * The question is:
 * How can I get $POST selected by the user and put it in another function in wordpress?
 * Thanks to everyone can help me..
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659164)
 * I’ve also found this example but if I put the new function in select.class.php
   it doesn’t works.
    [http://wptheming.com/2013/07/simple-ajax-example/](http://wptheming.com/2013/07/simple-ajax-example/)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659172)
 * `$_POST` isn’t working because you did not put the key value in quotes. You want
   to do `$_POST['id_pro']`. Secondly, when using array or object values in a double
   quoted string, delimit the variable with curly braces {}.
    `"SELECT * FROM {$
   wpdb->prefix}comuni WHERE id_pro={$_POST['id_pro']}"`
 * `$_POST['id_pro']` is probably OK without curly braces, there seems to be some
   variation of what’s acceptable without them. I figure better to be safe.
 * Similarly, loading jQuery from googleapis can be a problem. It often works OK,
   but better to be safe and load jQuery correctly by enqueuing WP’s resident jquery
   with `wp_enqueue_script()`. The WP version run’s in noConflict mode so you must
   either use `jQuery` instead of the `$` shortcut, or wrap your code in a noConflict
   wrapper.
    [https://developer.wordpress.org/reference/functions/wp_enqueue_script/](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
 * There’s a user note down near the bottom about noConflict wrappers that I added
   to the linked article.
 * I’d suggest you get a basic implementation of AJAX in WP working first, then 
   incrementally build upon that working version until you are able to get to a 
   complete chained select sequence. Here’s another reference for AJAX in WP. The
   link is to the first page, it runs on for several pages.
    [https://developer.wordpress.org/plugins/javascript/](https://developer.wordpress.org/plugins/javascript/)
 * Note that if your PHP AJAX handler is a class method, you add your handler to
   the action hook (which is constructed based on an ‘action’ value sent by your`
   jQuery.post()` method, which I don’t see in your code) using the normal class
   method syntax.
    `add_action('wp_ajax_my_jq_action', array('My_Class', 'my_ajax_handler'));`
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659285)
 * Hi bcworkz,
    thanks for your reply.. I’ve followed your tips but nothing is changed.
 * jQuery was already installed so my fault trying to get jQuery from googleapis.
   Now I just added the tutorial script in the enqueued main js file.
    Here the 
   code:
 *     ```
       jQuery(document).ready(function() {
   
           var scegli = '<option value="0">Scegli...</option>';
           var attendere = '<option value="0">Attendere...</option>';
   
           jQuery("select#province").html(scegli);
           jQuery("select#province").attr("disabled", "disabled");
           jQuery("select#comuni").html(scegli);
           jQuery("select#comuni").attr("disabled", "disabled");
   
           jQuery("select#regioni").change(function(){
               var regione = jQuery("select#regioni option:selected").attr('value');
               jQuery("select#province").html(attendere);
               jQuery("select#province").attr("disabled", "disabled");
               jQuery("select#comuni").html(scegli);
               jQuery("select#comuni").attr("disabled", "disabled");
   
               jQuery.post("select.php", {id_reg:regione}, function(data){
                   jQuery("select#province").removeAttr("disabled");
                   jQuery("select#province").html(data);
               });
           }); 
   
           jQuery("select#province").change(function(){
               jQuery("select#comuni").attr("disabled", "disabled");
               jQuery("select#comuni").html(attendere);
               var provincia = jQuery("select#province option:selected").attr('value');
               jQuery.post("wp-content/select/select.class.php", {id_pro:provincia}, function(data){
                   jQuery("select#comuni").removeAttr("disabled");
                   jQuery("select#comuni").html(data);
               });
           });
       });
       ```
   
 * I think the error is here:
 *     ```
       jQuery.post("wp-content/select/select.class.php", {id_pro:provincia}, function(data){
                   jQuery("select#comuni").removeAttr("disabled");
                   jQuery("select#comuni").html(data);
               });
       ```
   
 * but anyway I get “Undefined index” errors..
 * About server side now select.class.php is:
 *     ```
       function ShowRegioni() {
       	global $wpdb;
       	$query = "SELECT * FROM {$wpdb->prefix}regioni";
       	$results_regione = $wpdb->get_results($query);
       	echo '<select id="regioni">';
       	echo '<option value="0">Scegli...</option>';
   
       	foreach($results_regione as $row) {
               $regione_id = $row->id_reg;
               $regione_name = $row->nome_regione;
               echo '<option value='.$regione_id.'>'.$regione_name.'</option>';
           }
   
           echo '</select>';
   
       }
   
       function ShowProvince() {
       	global $wpdb;
       	$query = "SELECT * FROM {$wpdb->prefix}province WHERE id_reg={$_POST['id_reg']}";
       	$results_provincia = $wpdb->get_results($query);
       	echo '<select id="province">';
       	echo '<option value="0">scegli...</option>';
   
       	foreach($results_provincia as $row) {
               $provincia_id = $row->id_pro;
               $provincia_name = $row->nome_provincia;
               echo '<option value='.$provincia_id.'>'.$provincia_name.'</option>';
           }
   
           echo '</select>';
   
       }
   
       function ShowComuni() {
       	global $wpdb;
       	$query = "SELECT * FROM {$wpdb->prefix}comuni WHERE id_pro={$_POST['id_pro']}";
       	$results_provincia = $wpdb->get_results($query);
       	echo '<select id="comuni">';
       	echo '<option value="0">scegli...</option>';
   
       	foreach($results_comune as $row) {
               $comune_id = $row->id_com;
               $comune_cap = $row->cap;
               echo '<option value='.$comune_id.'>'.$comune_cap.'</option>';
           }
   
           echo '</select>';
   
       }
       ```
   
 * I can’t get $_POST value..
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659286)
 * here the link:
    [http://chainedselect.altervista.org](http://chainedselect.altervista.org)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659287)
 * You cannot post directly to select.class.php if you want to use WP functions.
   AJAX requests must go through /wp-admin/admin-ajax.php. Part of the data POSTed
   to admin-ajax.php must be `action: 'any_arbitrary_tag'`. The action tag is used
   to do actions called ‘wp_ajax_any_arbitrary_tag’ for logged in users and ‘wp_ajax_no_priv_any_arbitrary_tag’
   for not logged in users. Add an action callback to either or both actions, like
   so:
    `add_action('wp_ajax_any_arbitrary_tag', array('My_Class', 'my_ajax_handler'));`
 * In this example, the `MY_Class::my_ajax_handler()` method is called when jQuery
   POSTs the `action: 'any_arbitrary_tag'` data along with any other data your callback
   needs to /wp-admin/admin-ajax.php. That data will be available in `$_POST` if
   all of the preceding was done correctly.
 * Anything output by your callback will be collected by jQuery’s response parameter
   of the response function specified in `jQuery.post()`. Don’t forget to call `
   wp_die()` or otherwise terminate the PHP process when it’s done.
 *  Thread Starter [vic20](https://wordpress.org/support/users/redrop/)
 * (@redrop)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659335)
 * Thanks a lot bcworkz,I finally decided to follow another way..
    I also figured
   out using the wordpress database for another application would be dangerous..
   I created another database (out of wordpress) I imported the tutorial tables 
   and I called it in db_config.php. Everything is working good..and so I think 
   that way is better for security and everything..Thanks again for your help!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Chained select with jquery’ is closed to new replies.

## Tags

 * [chained select](https://wordpress.org/support/topic-tag/chained-select/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 10 replies
 * 3 participants
 * Last reply from: [vic20](https://wordpress.org/support/users/redrop/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/chained-select-with-jquery-1/#post-7659335)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics