Note that there are some explanatory texts on larger screens.

plurals
  1. POPopulate select with jQuery and PHP
    primarykey
    data
    text
    <p>I have a table that includes the taxonomic name of a species. So there are separate columns for each species, domain, kingdom, phylum, etc. I am using a select boxes for each of these classifications, and what I need to happen is when the first one (Domain) is selected, the database is queried to get all the kingdomes where domain is the value of the previous select.</p> <p>Here's what I have for my PHP in 'search.php':</p> <pre><code>&lt;select name="domain" id="domain"&gt; &lt;option value="standard"&gt;-- Domain --&lt;/option&gt; &lt;?php while($row = mysql_fetch_array($get_domains, MYSQL_NUM)) { echo "&lt;option value='$row[0]'&gt;$row[0]&lt;/option&gt;"; } ?&gt; &lt;/select&gt; &lt;select name="kingdom" id="kingdom" &gt; &lt;option value="standard"&gt;-- Kingdom --&lt;/option&gt; &lt;?php $result = array(); $domain = $_POST['domain']; $get_kingdoms = mysql_query("SELECT DISTINCT sci_kingdom FROM tbl_lifedata WHERE sci_domain = $domain"); while($row = mysql_fetch_array($get_kingdoms, MYSQL_NUM)) { $result[] = array( 'name' =&gt; $row[0] ); } echo json_encode($result); ?&gt; &lt;/select&gt; </code></pre> <p>And this is what I have in my jquery:</p> <pre><code>$('#domain').change(function() { $domain = $('#domain option:selected').val(); if ($domain == 'standard') { $('#kingdom').attr('disabled', 'disabled'); $('.btn-cover').text('Select a Domain:'); } else { $('#kingdom').removeAttr('disabled', 'disabled'); $('.btn-cover').text('Select a Kingdom:'); } }); $('#kingdom').change(function() { $kingdom = $('#kingdom option:selected').val(); if ($kingdom == 'standard') { $('#domain').removeAttr('disabled', 'disabled'); $('#phylum').attr('disabled', 'disabled'); $('.btn-cover').text('Select a Kingdom:'); } else { $('#domain').attr('disabled', 'disabled'); $('#phylum').removeAttr('disabled', 'disabled'); $('.btn-cover').text('Select a Phylum:'); $.post("search.php", { 'domain': option }, function(data) { var sel = $("#kingdom"); sel.empty(); for (var i = 0; i &lt; data.length; i++) { sel.append('&lt;option&gt;' + data[i].name + '&lt;/option&gt;'); } }, "json"); } });​ </code></pre> <p>I'm having the most trouble understanding how the .post() function works. I know exactly what I want to do, just not exactly how to do.</p> <p>My goal: - obtain the value of the domain select box when it is changed - use that value in the mysql query to get the relevant kingdoms - execute the query using jquery and then populate the kingdom select box</p> <p>Thanks!</p>
    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. 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