Question

I’m making a website to learn coding and am making 2 select dropdowns that will have 1 be populated from the database table -> cat. The other select dropdown will be populated from table -> subcat. The database for cat and subcat look like this:

Table Cat

id (int 15) || cat(varchar 75) || number (int 3)

Table Subcat

id (int 15) || subcat(varchar 75) || catnumber (int 3)

Every subcat row has a catnumber that corresponds with the row in cat -> number. So for example if we have Restaurants which is a row in Cat that has a number of 2, then if we also have American Food, and Chinese Food which have catnumber’s of 2, then they are corresponding.

Here’s my code for pulling out of the database for all 3 of my cat dropdowns.

<p><b>Cat1:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

<!-- Next CAT -->

<p><b>Cat2:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect2' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

<!-- Next CAT -->

<p><b>Cat3:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

And here’s my code for pulling out of the database for all 3 of my subcat dropdowns

<p><b>Subcat1:</b><br />
<?php
  $query="SELECT * FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?>
<p><b>Subcat2:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect2' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?> 
<p><b>Subcat3:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect3' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?>

So right now all of the subcat selects are trying to get all the subcategories for the cat with a number of 1 ( which is Restaurants ). How do I get whatever is selected on the cat select to make (without refreshing the page) the corresponding subcat select display the corresponding subcat list for the number of the cat?

^ Very sorry for doing a terrible job explaining it. In the end I basically want it like Yelps -> here

Thanks for all help!

Answer 1

You need to make an ajax call to query the database in the background, then return the results (as HTML) and populate your subcategory select.

<select name="cat" id="cat">...</select>
<select name="subCat" id="subCat">...</select>

<script language="javascript">
    $('#cat').change(function() {
        $.post('getSubcat.php', {
           cat: $(this).val()
        }, function(data) {
            $("#subCat").html(data);
        }
    });
</script>

Make sure your getSubcat.php script echoes the results as

<option value='whatever'>Label</option>
<option value='whatever2'>Label2</option> ...

getSubcat.php would be a simple query / output script:

<?php
$category = $_POST['cat'];

$query = "SELECT * FROM subcategories WHERE parent_category = " . $category;
$result = mysql_query($query);

echo "<option value='0'>Select a subcategory</option>";
while($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['id'] . "'>" . $row['subcategory_name'] . "</option>";
}

NOTE: This utilizes jQuery – make sure your page includes the jQuery libraries

<script src="http://code.jquery.com/jquery-latest.min.js"></script>