Get Values Associated with First Dropdown Chosen - php

Question

<select style="width:300px;" id="FirstDD" name="userListingCategory" onchange="FillSelectTwo(this.options[this.selectedIndex].value)">
<option disabled="disabled">Category...</option>
<?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
{echo "<option value=". $row['catID'] . ">" .$row['catName']."</option>";}
unset($sth2);
$selectedOptionInCategory = $row['catID'];
?>
</select>
<select style="width:340px;" id="SecDD" name="userListingSCategory">
<option disabled="disabled">Sub-Category...</option>
<?php while($row = $sth3->fetch(PDO::FETCH_ASSOC))
{echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";}
unset($sth3);
?>
When a 'category' is selected like:
I want the subcategories associated with that first category chosen to show up.
I'm running the following SQL:
SELECT scatID, scatName
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID
AND C.catID = '$selectedOptionInCategory'
JS:
function FillSelectTwo(id) { //what is this id for?
$.ajax({
url: 'index.php',
dataType: 'text',
success: function(data) {
$('#SecDD').find('option').remove().end().append(data);
},
error:function(jxhr){
console.log(jxhr.responseText);
}
});
}
Problem I get
When I test this code out, I selected a category like Baby, then the subcategory box clears the first 'disabled' option value, but then its an empty set from there and I can't selected any of the values that the SQL would return upon selecting a category.
What it looks like:

Answer 1

javascript ssems to be fine but i doubt if the ajax call is going out in the first place
see in the firebug or developer tools(for chrome) to confirm that the ajax call is made to index.php
also remove the options in the success callback so if the ajax fails the select remains intact and make an error callback to trace errors
function FillSelectTwo(id) { //what is this id for?
$.ajax({
url: 'index.php',
dataType: 'text',
success: function(data) {
$('#SecDD').find('option').remove().end().append(data);
},
error:function(jxhr){
console.log(jxhr.responseText);
}
});
}
P.S. the is a ' missing at the end of your url may be that is causing the problem

Answer 2

It is pretty easy...
First you need to make a PHP-function that return the subcats. I often make a ajax.php file. In this I have differents functions that being called on in diffs. $_GET.
The PHP viewer for the result.
switch($_GET['ajax'])
{
case 'subcats' :
$sql = [YOUR SQL QUERY];
if(mysql_num_rows($sql)!=0)
{
echo "[";
$i = 0;
while($r = mysql_fetch_array($sql))
{
if($i!=0)
{echo ',';}
echo "['$r[scatID]','$r[ScatName]']";
}
echo ']';
}
break;
}
The jQuery for the ajax request
$.post("ajax.php?ajax=subcats",'id='+$("#FirstDD").val(), function(result){
var print = '';
if(result)
{
for(i = 0;i<result.length; i++)
{
var current = result[i];
print += '<option value="'+ current[0] +'">'+ current[1] +'</option>';
}
$('#SecDD').html(print);
$('#SecDD').removeAttr('disabled');
}
});
It might be some errors (ondemand writings is not my strongest side ^_^), but try to inteplate this to your script. And comment if you meet any errors...
**
EDIT
**
But in your case, when I now understand it. In the subcats options element, add the attr. rel, in wich you write the parent id.
Afterwords, you add this jQuery code:
$('#FirstDD').change(function(){
var thisId = $(this).attr('id');
$('#SecDD option').addAttr('disabled','disabled');
$('#SecDD option[rel="'+thisId+'"]').removeAttr('disabled');
});