Display results on combobox by selecting a value on another combobox

Question

I have a problem in my project. I have these categories:

Football
Basketball
Tennis

and these sub categories:

super league A
super league B
euroleague
Serie A

I have the categories and sub categories in my phpMyAdmin DB. I have this code now, that I display these two, in two different comboboxes, via queries from DB:

<?php
$category = mysql_query("SELECT * FROM katigories ORDER BY id_katigoria");
echo "<select name='katigoria'>";
echo "<option selected='selected' value='0'> Επιλογή κατηγορίας! </option>";
while($values = mysql_fetch_assoc($category))
{
    echo "<option value='$values[id_katigoria]'>".$values['katigoria']."</option>";
}
echo "</select>";
?>

and

<?php
$category = mysql_query("SELECT * FROM upokatigories ORDER BY id_upokatigoria");
echo "<select name='upokatigoria'>";
echo "<option selected='selected' value='0'> Επιλογή υποκατηγορίας! </option>";
while($values = mysql_fetch_assoc($category))
{
    echo "<option value='$values[id_upokatigoria]'>".$values['katigoria']."</option>";
}
echo "</select>";
?>

so far so good. But now my problem is that I want to select from the first one Basketball, and I want to see ONLY the euroleague to the second combobox.

I don't know much about JS or jQuery, but I believe between two of them is the answer I am looking for. Am I right?

Please any ideas, to continue, or any suggestions, about what to read and where to look?

PS I found something similar here, but it was for C# or/and python..so, I hope I am not repeating any other questions

Answer 1

You need some jQuery that makes an ajax call to the server to bring back the new dropdown list. See here: http://www.codingcereal.com/2009/09/autopopulate-select-dropdown-box-using-jquery/