多个菜单中的下拉脚本

Question

找不到错误。我有三个连接到SQL服务器的下拉菜单。当我加载页面时，第一个下拉列表已经填满了。从第一个下拉列表中选择一个值后，页面从脚本中调用函数"reload(form)“，并在中显示第二个值中的新索引。但当我从第二个下拉列表中选择一个值来调用函数"reload2(form)“时，它会刷新整个页面，从第一个和第二个下拉列表中选择的值将消失，dird下拉列表不会显示任何内容。以下是脚本代码：

    <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>

下面是我的php代码：

    <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>"
?>

变量$consultarefac、$consultacliente、$consultaequipos是SQL查询。有什么建议吗？

Answer 1

我建议不要每次有人更改下拉菜单时都重新加载页面。我建议使用AJAX只更新当前下拉框下面的下拉框。

一个简单的AJAX调用就是用一段html替换下面下拉列表周围的div。第一次选择将替换div 'second‘的内容(这将包括清除第三个下拉列表。第二个select将替换div 'third‘的内容。

使用ajax抓取的页面将只返回相应部分的html代码片段。replace函数将针对相应的页面使用ajax来替换相应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>