title: How to populate sql query result in a series of chained select boxes?
body: <p>I have these four tables (which are hierarchical, meanwhile) in my database:</p>
  
  <p>Table 1: State</p>
  
  <pre><code>+----------+-------------+
  | state_id | state_name  |
  +----------+-------------+
  |        1 | Maharashtra |
  |        2 | Goa         |
  +----------+-------------+
  </code></pre>
  
  <p>Table 2: District</p>
  
  <pre><code>+-------------+---------------+----------+
  | 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 |
  +-------------+---------------+----------+
  </code></pre>
  
  <p>Table 3: Taluka</p>
  
  <pre><code>+-----------+-------------+-------------+
  | 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 |
  +-----------+-------------+-------------+
  </code></pre>
  
  <p>Table 4: Village</p>
  
  <pre><code>+------------+--------------+-----------+
  | village_id | village_name | taluka_id |
  +------------+--------------+-----------+
  |          1 | Ranjangaon   |         5 |
  |          2 | Wadgaon      |         5 |
  |          3 | Teesgaon     |         5 |
  +------------+--------------+-----------+
  </code></pre>
  
  <p>How could I show select boxes dynamically loaded while happening of following events:</p>
  
  <ul>
  <li>Display select box for state names from "State" table 
  
  <ul>
  <li>Here, <code>state_id</code> as value of <code>&lt;option&gt;</code> tag and <code>state_name</code> as text between opening and closing <code>&lt;option&gt;</code> tags)</li>
  </ul></li>
  <li>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 
  
  <ul>
  <li>Here, <code>district_id</code> as value of <code>&lt;option&gt;</code> tag and <code>district_name</code> as text between opening and closing <code>&lt;option&gt;</code> tags</li>
  </ul></li>
  <li>Similary create a new select box for Talukas under selected District from second select box.</li>
  <li>Once again, similary create a new select box for Villages under selected Taluka from third select box.</li>
  </ul>
  
  <hr>
  
  <p>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.</p>
  
  <p>The aim behind this process is that I need to get the <code>village_id</code> of specific Village along with other data like it's <code>state_id</code>, <code>district_id</code>, and <code>taluka_id</code>.</p>
  
  <p>Please provide an easy to use and flexible solution strictly using <strong>jQuery + AJAX, MySQL, PHP</strong>.</p>
  
  <p>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 <code>change</code> 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 <code>bind</code>, <code>delegate</code> or <code>live</code> event handlers, huh--I don't know!!! :P</p>
  
  <hr>
  
  <p>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! ;)</p>
  
  <hr>
  
  <p>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):</p>
  
  <p><img src="https://i.stack.imgur.com/04ZAm.png" alt="&quot;Prototype design for describing question&quot;" title="Prototype design for describing question"></p>
  
  <hr>
  
  <hr>
  
  <p><strong>UPDATE</strong>: Working demo code is available here: <a href="https://github.com/vishaltelangre/select-chain" rel="nofollow noreferrer">https://github.com/vishaltelangre/select-chain</a></p>