Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I would just make put the variables in javascript with php and then use javascript functions.. no jquery or AJAX needed.</p> <p>However you need to have a foreign key for subcategories no matter what.. ie - For every record in subcat table you need to give it a catid so for referencing...</p> <pre><code>&lt;?php $db = new mysqli('localhost','user','password','dbname');//set your database handler $query = "SELECT id,cat FROM cat"; $result = $db-&gt;query($query); while($row = $result-&gt;fetch_assoc()){ $categories[] = array("id" =&gt; $row['id'], "val" =&gt; $row['cat']); } $query = "SELECT id, catid, subcat FROM subcat"; $result = $db-&gt;query($query); while($row = $result-&gt;fetch_assoc()){ $subcats[$row['catid']][] = array("id" =&gt; $row['id'], "val" =&gt; $row['subcat']); } $jsonCats = json_encode($categories); $jsonSubCats = json_encode($subcats); ?&gt; &lt;!docytpe html&gt; &lt;html&gt; &lt;head&gt; &lt;script type='text/javascript'&gt; &lt;?php echo "var categories = $jsonCats; \n"; echo "var subcats = $jsonSubCats; \n"; ?&gt; function loadCategories(){ var select = document.getElementById("categoriesSelect"); select.onchange = updateSubCats; for(var i = 0; i &lt; categories.length; i++){ select.options[i] = new Option(categories[i].val,categories[i].id); } } function updateSubCats(){ var catSelect = this; var catid = this.value; var subcatSelect = document.getElementById("subcatsSelect"); subcatSelect.options.length = 0; //delete all options if any present for(var i = 0; i &lt; subcats[catid].length; i++){ subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); } } &lt;/script&gt; &lt;/head&gt; &lt;body onload='loadCategories()'&gt; &lt;select id='categoriesSelect'&gt; &lt;/select&gt; &lt;select id='subcatsSelect'&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload