MySQL Query based on User Input - Multiple Dropdowns

Question

I am creating a drop down selection where each of the sub selections, queries with results from the previous. I've searched and formed my work after a similar post I found, unfortunately, I still cannot get it to work. Any help would be awesome. Thank you.

I am using select for the dropdowns, with id=level1, level2, level3 etc.

here is the html dropdown selection portion of my code

Enter Auction Category : <input type="text" name="fcv" id="fcv" /> <br> 
or Select Category : <br> 
<select class="sspecial" name="level1" id="level1" onchange="getDropdownOptions()"> 
<option></option>

<? 
$level1_sql="SELECT * FROM Ebay_Category WHERE Level = '1' ORDER BY Category"; 
$level1_results=mysql_query($level1_sql); 
while($level1=mysql_fetch_array($level1_results)) { 
  if ($level1['Leaf']) { 
    echo "<option value='".$level1['ebay_category_id']."'>".$level1['Category']."</option>"; 
   } else { 
  echo "<option value=''>".$level1['Category']."</option>"; 
  } 
} 
?> 

</select> 



<br><br> 
<select class="sspecial" name="level2" id="level2"> 
<option value=''></option> 
</select> 

the user sees the dropdown populated for level1 only. they then select from it - and at this point, I would like level2 to become populated with a query based on level 1 selection.

here is the javascript i am relying on

<script type="text/javascript">
$(document).ready(function() {
    $('#level1').change(getDropdownOptions);
});

function getDropdownOptions() {
    var val = $(this).val();
    // fire a POST request to populate_L2.php
    $.post('populate_L2.php', { value : val }, populateDropdown, 'html');
}

function populateDropdown(data) {
    if (data != 'error') {
            $('#level2').html(data);
}
}


</script>

there are 6 levels , or selects, that I will be using.

1. parent
2. child of 1
3. child of 2
4. child of 3 and so on

I don't understand javascript well enough to see how it's going to actually populate the next option list - which means, I am sure I have left something out.

With the above, the menu pulls the parent from the original query, but on change, nothing happens to the subsequent one.

Thank you in advance for any direction or help anyone could provide.

Thank you again.

edit : showing my populate_L2.php code

mysql_connect("$servername", "$dbusername", "$dbpassword")or die("cannot connect");
mysql_select_db("$dbname")or die("cannot select DB");
$parentid=$_GET['value'];

$postSQL="select * Ebay_Category where Level='2' and ParentID=$parentid";

$postSelect=mysql_query($postSQL);
$html = "<option>--select--</option>";

while ($row = mysql_fetch_array($postSelect)) 
{
    if($row['Leaf']!=0){
    $html .= "<option value='".$row['CategoryID']."'>".$row['Category']."</option>";
    } else {
        $html .= "<option value=''>".$row['Category']."</option>";
    }

}

a word on placement. I have the javascript in the head of the document. I have other scripts that work flawlessly there -- this script is the last one to load in the head section though.

Since I have posted this - I verified my table name, my field name, and put in an echo to let me know if the populate_L2.php was being handed any focus -- it's not.

Edited

I just placed an alert('getDropdownOptions has been execuded'); line inside of getDropdownOptions() function -- when I change the value of the drop down- nothing changes, and no alert....

Thank you again for any suggestions.

Solved , kind of - using the jquery. Now I will need to open a new question I think, because technically it solves my original question.

to do dropdowns, up to 3 worked successfully doing the following;

Created a script in header;

    <script type="text/javascript">
    function getInfo(str) 
    {
if (str=="")
  {
  document.getElementById("catTitle").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("catTitle").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","cat_title.php?q="+str,true);
xmlhttp.send();
}
</script>

then in the same document,

I created my first select with an onchange='getInfo(this.value)' call I added in the same document a span tag with id of catTitle (repeated it for each of the additional selections as well)

then, the cat_title.php file I call in the script,

    $vx=$_GET["q"];
$SQL="SELECT * FROM Ebay_Category WHERE ParentID='".$vx."' ORDER BY Category";
$result=mysql_query($SQL);

echo "<select id='lev3' onchange='getInfo2(this.value)'>";
while ($row=mysql_fetch_array($result)){
    echo "<option value='".$row['CategoryID']."'>".$row['Category']."</option>";
}
    echo "</select>";

the echo's are sent to the form without a reload, and create a new select box for me to choose the next option.

This allowed me to tree down using level 1 select value to display options for 2, then select option 2, use that value to display the 3rd set of options - here is where I personally have an issue, because I cannot go any further.

the xmlhttp.status = 500, on ALL calls beyond the first 2. I'm hoping to find a way to reset that - check my questions out if you also need a deeper solution - because I'm about to ask for more awesome Stack Overflow support for that part specifically.

Answer 1

The Chained Selects jQuery plugin does what you need.