[PHP/JS] meerdere selectboxen

[Verwijderd]

Hallo mede tweakers,

ik ben bezig met een webpagina waarin ik 3 selectboxen heb waarbij de reultaten uit box 2 afhankelijk zijn van de resultaten uit box 1 en die van box 3 weer uit box 2. De waarden uit de 3 boxen worden uit 3 tabellen uit de db gehaald.

de 3 tabellen
hoofdgroep (hg_id, hoofdgroep)
groep (g_id, hg_id,groep)
subgroep (sg_id, g_id, subgroep)

als je de pagina laad wordt box 1 automatisch gevuld met data uit de db.
ook box 2 wordt automatisch geladen met alle waarden uit de tabe,
Dit mag dus niet want hier mag alleen data staan die te maken heeft met de data uit box 1.

nu spreek ik een aardig woordje php maar java lukt me toch niet voldoende.
de code komt van 2 select boxen welke ik 2x gecombineerd heb tot 1x3
de code met // ervoor zorgt voor de 4de combo box. (ook de 2e)

Wie kan mij helpen dat box 2 en 3 zich automatisch goed vullen

hier de code

PHP:

<?php
session_start();
include 'header.php';

echo "<form method='post' name=f1 >";
$result = mysql_query("SELECT * FROM hoofdgroep,groep WHERE hoofdgroep.hg_id=groep.hg_id order by hoofdgroep.hg_id");
echo "<tr><th>hoofdgroep:</th><td><SELECT NAME='m_hg' ONCHANGE='countryselected(this);' >";
echo "<OPTION VALUE=''>kies een hoofdgroep</OPTION>";
$sJavaScript = "function countryselected(elem)
{ 
for (var i = document.f1.m_g.options.length;
 i >= 0;
 i--)
{
  document.f1.m_g.options[i] = null;";
$sLastCountry="";
while ( $row = mysql_fetch_array($result) ) 
  {   
  If ($sLastCountry!=$row["hoofdgroep"]){ 
      $sLastCountry = $row["hoofdgroep"];
            echo "<OPTION VALUE='".$row["hg_id"]."'>".$sLastCountry."</OPTION>";
      $sJavaScript = $sJavaScript."}"."if (elem.options[elem.selectedIndex].value==".$row["hg_id"]."){";
     }
      $sJavaScript = $sJavaScript."document.f1.m_g.options[document.f1.m_g.options.length] = 
      new Option('".$row["groep"]."','".$row["g_id"]."');";
     }
  echo "</SELECT></td></tr>";

//echo "<tr><th>Groep:</th><td><SELECT NAME='m_g' ONCHANGE='groepselected(this);'>";
//echo "<OPTION>kies een groep</OPTION>";
//echo "</SELECT></td></tr>";

  $sJavaScript = $sJavaScript."}}";
  echo "<SCRIPT LANGUAGE=\"JavaScript\">"; 
  echo "".$sJavaScript."</SCRIPT>";

$result = mysql_query("SELECT * FROM groep,subgroep WHERE groep.g_id=subgroep.g_id order by groep.g_id");
echo "<tr><th>Groep:</th><td><SELECT NAME='m_g' ONCHANGE='groepselected(this);' >";
echo "<OPTION VALUE=''>Selecteer een groep</OPTION>";
$sJavaScript = "function groepselected(elem)
{ for (var i = document.f1.m_sg.options.length; 
i >= 0;
 i--)
{
  document.f1.m_sg.options[i] = null;
";
$sLastgroep="";
while ( $row = mysql_fetch_array($result) ) 
  {   
  If ($sLastgroep!=$row["groep"]){ 
      $sLastgroep = $row["groep"];
      echo "<OPTION VALUE='".$row["g_id"]."'>".$sLastgroep."</OPTION>";
      $sJavaScript = $sJavaScript."}"."if (elem.options[elem.selectedIndex].value==".$row["g_id"]."){";
     }
      $sJavaScript = $sJavaScript."document.f1.m_sg.options[document.f1.m_sg.options.length] = new Option('".$row["subgroep"]."','".$row["sg_id"]."');";
     }
  echo "</SELECT></td></tr>";

  echo "<tr><th>Subgroep:</th><td><SELECT NAME='m_sg' >";
  echo "<OPTION>Selecteer een subgroep</OPTION>";
  echo "</SELECT></td></tr>";

  $sJavaScript = $sJavaScript."}}";
  echo "<SCRIPT LANGUAGE=\"JavaScript\">"; 
  echo "".$sJavaScript."</SCRIPT>";
echo " </select></td></tr>";  


echo "</form>";
?>

[_js_]

Als je de bron bekijkt van http://www.alistapart.com...clists/dynamicselect.html dan heb je een voorbeeld van het benodigde javascript (dus niet java).

[CH4OS]

Vind je het heel erg, als ik de code nogal onleesbaar vind? Als je de [code]-tag aanpast naar [code=php] en wat aan indenting doet, word je code veel overzichtelijker. Wellicht dat de syntax highlighter een fout aangeeft ook.

[NMe]

Java en Javascript zijn twee totaal verschillende dingen. Dat je dat alvast niet weet verklaart voor een groot deel waarom het hier mis gaat.

Om te beginnen: waarom heb je HTML-uitvoer midden in een functiedeclaratie van Javascript staan? Je code is zoals GJtje al zegt bijna niet te lezen (ook niet met de highlighting die ik er net aan heb toegevoegd). Ik zou alleen niet aan intending maar aan indenting (inspringen) gaan doen.

[Verwijderd]

Op de manier van _js_ zijn alle beschikbare opties nog wel in de sourcecode te vinden. Mocht dit niet de bedoeling zijn dan zul je met AJAX moeten gaan werken maar aangezien je javascript al lastig vind is dit misschien nog iets te geavanceerd.

Hiermee kan je dynamisch data weergeven op de pagina zonder de pagina volledig te reloaden.
W3schools heeft hier een mooie tutorial voor: AJAX tutorial