Question

I have these four tables (which are hierarchical, meanwhile) in my database:

Table 1: State

+----------+-------------+
| state_id | state_name  |
+----------+-------------+
|        1 | Maharashtra |
|        2 | Goa         |
+----------+-------------+

Table 2: District

+-------------+---------------+----------+
| district_id | district_name | state_id |
+-------------+---------------+----------+
|           1 | Mumbai        |        1 |
|           2 | Pune          |        1 |
|           3 | Nashik        |        1 |
|           4 | Aurangabad    |        1 |
|           5 | Panjim        |        2 |
|           6 | Dandeli       |        2 |
|           7 | Karwar        |        2 |
+-------------+---------------+----------+

Table 3: Taluka

+-----------+-------------+-------------+
| taluka_id | taluka_name | district_id |
+-----------+-------------+-------------+
|         1 | Alibag      |           1 |
|         2 | Kalyan      |           1 |
|         3 | Matheran    |           1 |
|         4 | Vaijapur    |           4 |
|         5 | Gangapur    |           4 |
|         6 | Kannad      |           4 |
|         7 | Sillod      |           4 |
|         8 | Madgaon     |           5 |
|         9 | Vengurle    |           5 |
|        10 | Sawantwadi  |           5 |
+-----------+-------------+-------------+

Table 4: Village

+------------+--------------+-----------+
| village_id | village_name | taluka_id |
+------------+--------------+-----------+
|          1 | Ranjangaon   |         5 |
|          2 | Wadgaon      |         5 |
|          3 | Teesgaon     |         5 |
+------------+--------------+-----------+

How could I show select boxes dynamically loaded while happening of following events:

• Display select box for state names from “State” table
  • Here, state_id as value of <option> tag and state_name as text between opening and closing <option> tags)
• On selecting any of the state from first select box for states, display a newly created select box for district names from “District” table relative to selected state option from first select box
  • Here, district_id as value of <option> tag and district_name as text between opening and closing <option> tags
• Similary create a new select box for Talukas under selected District from second select box.
• Once again, similary create a new select box for Villages under selected Taluka from third select box.

---

In the above manner, when going through selecting one by one values from newly created select boxes (which we may call children of parent/root select boxes), we finally would have four select boxes for viz. State, District, Taluka, Village.

The aim behind this process is that I need to get the village_id of specific Village along with other data like it’s state_id, district_id, and taluka_id.

Please provide an easy to use and flexible solution strictly using jQuery + AJAX, MySQL, PHP.

FYI, I have succeeded to populate select boxes for States and Districts using jQuery’s ajax method to POST value of changed select box asynchronously to a query containing PHP script. Well, this worked until I get second select box for Districts. This select box for Districts is created by DOM manipulation rather by server using jQuery, so I couldn’t check for change event on Districts’ select box so as to POST it’s selected value via AJAX to a MySQL query containing PHP script which queries Database for specific District and returns relative Talukas. Can it be handled using bind, delegate or live event handlers, huh–I don’t know!!! 😛

---

Well, my logic must be totally wrong. Just forget it, and please give me a complete solution. I will learn many things from that solution.
Thank you for reading this all disgust, by the way! 😉

---

I have created a prototype design for this. This should help to describe the question in visual way (or exactly what I wanted as output or solution to be):

---

---

UPDATE: Working demo code is available here: https://github.com/vishaltelangre/select-chain

Answer 1

1. Show a dropdown using State table. state_id will be option value and state_name will be text.
2. When onchange event fires on this dropdown get the value of selected option.
3. Send an Ajax call to load district for selected state. The parameter will be state_id
4. In the PHP end get all the rows from District that with matching state_id. Return it as JSON response
5. When Ajax get the response, create a new dropdown or populate previously created one with this new result.
6. Go to Step 1 for District then Taluka then Village