2 select velden, 1 select veld laat onchange veld 2 alleen van vereniging, team zien

[infernothebest]

Ik heb 2 select velden via php ingeladen. Ik wil dat als er een vereniging gekozen wordt alleen nog maar de de teams zien in het andere select veld van die vereniging, hoe kan ik dit oplossen zonder de pagina te herladen in javascript? In mysql zit in de tabel van team ook Vereniging_ID, ik hoop dat jullie mij kunnen helpen of de goede weg op wijzen.

<select name="Vereniging" id="Vereniging_list" class="select2 full-width-fix required">
<option value=""></option>														
<?
$result = mysql_query("SELECT * FROM Vereniging");
while($row = mysql_fetch_array( $result )) { 
echo '<option value="'.$row["Vereniging_ID"].'">'.$row["Naam"].'</option>';

} 
?>
</select>


<select name="Team" id="Team_list" class="select2 full-width-fix required">
<option value=""></option>														
<?
$result = mysql_query("SELECT * FROM Team");
while($row = mysql_fetch_array( $result )) { 
echo '<option value="'.$row["Vereniging_ID"]."|".$row["Team_ID"].'">'.$row["Naam"].'</option>';

} 

?>
</select>

een Output van php kan zo worden weergegeven in HTML

<select name="Vereniging" id="Vereniging_list" class="select2 full-width-fix required">
<option value=""></option>														
<option value="1">Vereniging 1</option>
<option value="2">Vereniging 2</option>
</select>


<select name="Team" id="Team_list" class="select2 full-width-fix required">
<option value=""></option>
<option value="1|1">Team A</option>
<option value="1|2">Team B</option>
<option value="2|3">Team AB</option>
<option value="2|4">Team A</option>														
</select>

 

[total70]

http://jsfiddle.net/total70/C9wUm/1/

je hoeft alleen nog maar paar kleine dingen in je php script te veranderen.

 

[infernothebest]

Jij bent een held thanks, het is gelukt!!!!