多个菜单中的下拉脚本

Question

Can´t find the mistake. I have three dropdown menus which are connected to a SQL server. When I load the page the first dropdown is already filled. After selecting a value from the first dropdown the page calls the function "reload(form)" from the script and in shows the new index in the second value. Till there it works fine, but when I select a value from the second dropdown in order to call the function "reload2(form)" it refreshs the whole page and the value selected from the first and second dropdown disappears and the dird dropdown doesn't show anything. Here is the script code:

    <script language=JavaScript>
    function reload(form)
    {
    var  val=document.form.cliente.options[form.cliente.options.selectedIndex].value;
    self.location='indexmm.php?cliente=' + val ;
    }
    function reload2(form)
    {
    var val=document.form.cliente.options[form.cliente.options.selectedIndex].value;
    var val2=document.form.equipos.options[form.equipos.options.selectedIndex].value;
    self.location='indexmm.php?cliente=' + val + '&equipos=' + val2 ;
    }
    </script>

And here is my php code:

    <form method="post" name="form" id="form" action="post.php"> 

<h1>Cliente:
<?php
    echo "<select name='cliente' onchange=\"reload(this.form)\"><option value=''>Seleccione...</option>";   
    while($busq1 = mysql_fetch_array($consultacliente)) { 
        if($busq1['IdCln']==@$cliente){echo utf8_encode("<option selected value='$busq[IdCln]'>$busq1[Cliente]</option>"."<BR>");}
        else{echo utf8_encode("<option value='$busq1[IdCln]'>$busq1[Cliente]</option>");}
        }   
    echo "</select>"
?> 
</h1>


<h1>Equipos:</br></h1>
<?php
echo "<select name='equipos' size='5' style='width:400px' onchange=\"reload2(this.form)\">";
    while($busq3 = mysql_fetch_array($consultaequipos)) {
        if($busq3['IdGn']==@$refaccioness){
            echo utf8_encode("<option selected value='$busq3[IdGn]'>$busq3[Generador]</option>"."<BR>");}
        else{echo utf8_encode("<option value='$busq3[IdGn]'>$busq3[Generador]</option>");}
    }   
echo "</select>"
?>
</h1>

<h1>Refacciones:</br></h1>
<?php
echo "<select name='refacciones' size='20' style='width:400px'>";
    while($busq4 = mysql_fetch_array($consultarefac)) { 
        echo utf8_encode("<option value='$busq4[Descripcion]'>$busq2[Descripcion]</option>");
    }
echo "</select>"
?>

The variables $consultarefac, $consultacliente, $consultaequipos are the SQL query. Any suggestion?

Answer 1

I would recommend NOT reloading the page every time someone changes a dropdown. I would recommend only updating the dropdowns below the current one using AJAX.

Simple AJAX call would be to replace a div surrounding the following dropdown(s) with a snippet of html. The first select will replace the contents of div 'second' (which will include clearing the third dropdown. The second select will replace the contents of div 'third'.

The pages you grab with ajax will return the html snippet for only the appropriate section. The replace functions will use ajax against the appropriate pages to replace the contents of the appropriate div.

<div id="first">
    <select name=first onchange="replace1()"></select>
    <div id="second">
        <select name=second onchange="replace2()"></select>
        <div id="third">
            <select name=third></select>
        </div>
    </div>
</div>