Dynamic Dependent Select Box using Jquery and Ajax

Its again a very useful script shree, we often need these type of scripts. Thanx for sharing

nice script.. thanks

it has a bug, when i choose country, it shows the the countries in the City combo

Nice script.... but i feel that this can also be done without jquery, using onchange event for country select box and calling ajax.....

nice script.. like it!

If you can't code this up yourself in 10 minutes, it's time to get a new job that doesn't involve programming.

Very nice post...
how to convert this to codeigniter...

nice share thank you bro

What is the point of the pid field? it isn't used and always matches the did. Seems you could have just left it out. It is just confusing

Quite bad practice, you should really have 2 tables, a cities table with a country_id field and a countries table and use JOIN's to get the correct data.

Thanks You.

very useful script
Thank You So Much

Nice script...
Thank You So Much ...\m/\m/

anyone know how to make this 5 level ????

how to make this work on 3 select boxes

Cool and simple !!! 10x :)

Hi, Nice Worked But How To add chainde for city ( 3 levels ) State ?
India = Delhi
Delhi = ...etc (state)
Thanks For Reply
Best Regards

nice one :-)

I have specific value for 'pid' and 'did' in the database.

For example, the edit product page.

How can I make it auto select the specific 'pid' and 'did' that load from the database when the page is newly loaded?

How can I call this function with body onload for specific value of 'pid' and 'did'?

hello, i have one suggestion plz do the LIVE DEMO's Link BLANK

Thanks a lot ! it's very useful :)

thnks

Awesome, best I've found in my searches.

Fantastic. Exactly what I needed to learn. Thank you.

awesome..ur site make my job easy..thanks dude..

very nice but i want Dynamic Dependent Select Box using Jquery and Ajax with jsp

can anyone provide this script in jsp pleasse

thank you so much
i was working on it for many day at last i got it thank you

JSP please

it doesn't work with IE8 but it work fine on firefox

I can not recover the value of city after sending the form

Why??

ur simpliy great

Awesome...................

Thanks a lot ! it's very useful :)

After sending the form, I can recover and select the country value, but not the city. How can I load the city options and then select it the submitted value after sending the form?

Wow., it's very useful!! Thanks bro..

I want to use a textfield instead of select!

Just Rockin Post buddy.... keeeeep the same way in future

Hi budy,
Great post, thankyou very much

Thank you!

Thank you very much..

Nice Job! Thank you.

So I am trying to incorporate this into WordPress using categories as dropdown menus. I have the original menu being generated through the Wordpress function "wp_dropdown_categories" with a few variables (such as class, depth, etc) to make it only display the highest most categories.
Anyways it's not working. I have it call ajaxcats.php which checks for an id, then it renders the "wp_dropdown_categories" with the "child_of" category being the value that was passed. Sorry if it is difficult to understand. I can send you the code if you want.

It multiplies the select boxes -.-

hey all i just wanted to know how to have 3 select box and when first select box is selected table view should be there as we select the second box the table view should filter it and so on in the last select box is there any code that does it.(lang:php ajax)plz help im just looking for it

Thanks mate, Very useful. Converted it to ASP/Access and 3 levels. Thanks.

var id=$(this).val();
var dataString = 'id='+ id;

i dont get this part which id point that id of database ?

nice tutorial ..

regarding the Id part to remove confusion

var dataString = 'id='+ id;

'id=' is the name of "post" variable to the ajax.php page
and
+ id ----- here id denotes value of selected country from parent Combo box


dnd906@gmail

Thank you for sharing. I need this script.

what about the load() function. isnt it esier to use it?

$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$(".city").load('ajax_city.php?id='+id);

});

really useful

Really nice its very useful to me

Really nice script.

I just have a problem. I'm using a form with styles, and when the select is replaced by ajax by a new select, it loses all the styles. Do you know how to apply again the styles to this select?

Thanks in advance

......SMALL MISTAKE IN SCRIPT.....
when we choose one country in select box then appeared related cities , ok fine.. but again if we choose 'select-country' item in first select box then all country list display in second select box .it is voilated. Please verify once and reply it.

Works Fine...Thank you :)

IT's Works ..Thank's Mr. Srinivas Tamada..awesome code

great!:-)

great work yar!!!

Thanks... really helpful.. that's what i need to do now. I can insert the record into the database. But i have a problem.. how to edit the record (dependent list box)? please show me some example. Very urgent.

Thanks for your help. :)

Hi All,
i downloaded the code and it was very useful but is it possible to provide another selection box in which we can provide cities also, currently it is country and states. So can one help me out.

How do I add a submit button and direct the selected City for example to a separate City page?

Dear all
if you check file ajax_city.php
we have a sql query as below.
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent='$id'");

why there is "b" & "a" is used and what is the purpose of it? it is not defined any where?
plz help
thanks to all

Nice one shree. Its really useful

This is just madness, Brilliant work man !!!

And towards those commenter who said that the same thing could be done in another way, "This is just a directive tutorial which Tamada has posted to let Programmers have a concept without wasting their time by creating a new one to do the similar thing. If you can't inspire, then just stopby. You will probably find free blogs to share your own Talent!!!".

I usually read 9lessons, and i don't like people post such kind of worse reply without understanding the aim of the author.

This is totally not good normalization,

We can make it in single Data instead of 2..with proper data modelling and normalization

Good work. Could someone please post a solution to view 3 columns.

- This is a brother from the Isles of Solomon.

thks men
salutes from CHILE!

Nice, only one bug!
If you choose a country, and then go back to choosing "--select country--" then the country is showing in the second form

So helpful.
This is the one which I was looking for since a week.

Could you please help me by implementing exact the same using JSon?

Thanks,
Santosh

this is a very good post . no doubt at all.... bt how can we do it code igniter..it is not taking any effect with dependency...

Nice, thanks

You are great!!!!!!!!!!!!!!!!1

Friends, a doubt.

Friends the script is perfect. however when I duplicate the campousando jquery, the fields do not carry duplicate data is wrong?

Can anyone help me? I await contact

Atte.
Damian / Natal-RN/Brasil

Thanks a lot, easy & good explained

I am new to php, mysql, javascript, ajax.. I had been trying to auto populate dropdown boxes for a week.. Your tutorial was very clear and I was able to accomplish my goal. I really appreciate your presentation of the tasks.

Well done!

Great ...Well said..Thanks..

well done, so, how make 4 chainbox with mysql db

Nice and simple script that did the job. And how can I set selected attribute if both select box have data read from database. Such as retrieve record for editing ?

LOL.
You have SQL injection here:
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent='$id'");

Dont't use that.
USE:
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent=".mysql_real_escape_string($id).");

Can anyone help me modify the code so it works for like 10 forms on one page.

I have a form with like 20 products and they have to be placed in main and subcategorie.

I could use the script printing only one product and let someone put it in main and sub categorie, but as the script got like 2000 products I would like to have the option to present like 10 or 20 forms in wich products can be adjusted for price, name, main and sub categorie.

But now the javascript in the head section needs to be adjusted so it accepts those diverent names in stead of only accepting country and city.
It now needs to accept like: country001 / city001 and country002 / city002

Hope I explain properly so you know what I mean and you can help me out here.

Thanks

Great script tho!

A very nice script! But how to deal with a selectbox with a multiple="multiple" tag?

I know how to loop through a conventional $_POST['country'] array with different parents, but i don't know how to deal with an array in AJAX.
Please let me know.

Sorry, already found out! The (multiple) selected values are comma seperated.

Another problem: When using a .htaccess file with Rewrite-rules, the complete HTML is written by the Ajax function into the selectbox! How to solve this?

This is my .htaccess file:

Options +FollowSymLinks
AddDefaultCharset utf-8
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)(/)?$ index.php?req=$1 [L]

it works fine for me! anyone has the idea of how to disable the second combo box and enable it again after the first box is selected.

how to three dropdown list like category->products->brand , how to get the value the dynamic and store the db , can u help me..

thanks in advance..

Thank a lot

Hi,

I have created the dropdown with the categories and subcategories, like in the example. But, how can I show the results in the content area of my site?

Thanks.

Hi i'm trying to add third select that will be load from another table but I did'nt figure out how to do it

Great script... But what happens when you need the VALUE of the select statement to return what the actual selection reads instead of the ID number, a VARCHAR? Any way to get the VALUE to be the same as the SELECTION?

hi iam trying to alphabet sequence searching box than i did not search this box and i am search correct send email code in php language please help me

it's working ,but when a i use words with qccent it doesn't work ,a traid utf8 encode ,what should i do pls help

type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}

if i want to post two values to the file ajax_city.php then what to do? here only dataString is being posted. Please help.

I need this but with 3 select boxes, can you help me?

thank you very much, helped me a lot, finally found what he was looking

thank you very much, helped me a lot, finally found what he was looking

Thank bro.. really help me! nice script

Its working for me.The same code i want to apply with my sign up form where I have city, locality as dropdown,name,mob as text box.Then my city dropdown don't preserve its value..plz help me to find solution

superb!!!!!!!!!!!!

thanku very much, its very nice.

thanks u so much. great article

good. thanks u very much

thanks dude....

If i want to save the Country and City name based on selection to another table what would be the code. Currently it is saving the ID no.

thank you,, very helpfull..

thank you, very simple nice script. well done.

I have a simple question, I have 2 options which i whant to be putted in the second dropdownbox, how to make them always shown?

When i run the code,
browser shows
Notice: Undefined index: id in D:\xampp\htdocs\linking\ajax_city.php on line 4
help me, please

Thank you so much..

Thank you!!! :)

Thanks!
It works fast............

Thank you

it works like charm for two select but it is not working with 3 select and another problem here is if someone select the fist one select like in select country if someone change back to select country the next select disappears please reply asap thanks in advance !

very nice

it works fine but in my opinion this task can be accomplished with one single table, data table to which we add a city column (which contains 0 for countries and the corresponding id of the country for each city ex. Delhi - 1, Los Angeles - 2 and so on) and we create a self joined relation in sql query.
in ajax_city.php the sql statement will look like this

$sql=mysql_query("SELECT data1.id,data1.data FROM test.data data1 INNER JOIN test.data data2 ON data2.id=data1.city AND data1.city = '$id'");

Of couse this can be extended to the third child and so on...

how to store this value in one onother table ??

Thank you, helped me a lot.

how about for 3 drop downs? HELP :(

thank u! thank u! and thank u! you saved me! i wrote my first ajax with you real helpful post...

best code...really helped...

Thanks.. :)

Nice code ever

Thnx
Gd code

i am clicking on first dropdown it showing content from database but not showing of second dropdown from database.
how i solve this problem

i want code for country state and city drop down using ajax

how to create 3 dynamic select box with 3 different tables?

hello sir ,
thanking very much.
it's a nice script

its work ...but when we edit any post where we use both country and city ..
using json data implode in php we get city id through database.
we show in text box .. but its not working in dropdown onchange country. 'city' were not show so how to resolve it. on onclick edit function

HI,,WHEN I CLICK ON DEMO FOR YOUR nice script
there is some problem arries...
when i select india as country then all city related to india show in the city dropdown ,,,as when i choose uk or usa then their city is properly show in city dropdown...this is good,,,But problem is in this time when city drop down shows all city related to UK country .....if i change the dropdown value for uk and chose the option select country then city dropdown value changes..And it shows All country list in the city Dropdown main..

the selected value of city is not available. whats the issue. how to use the code in single php file, what change is required at url: "ajax_city.php",

Thank you .

how Data show in input text field?

nice but i want to write update code for this select boxes how can i know can u please post it