多个菜单中的下拉脚本

Question

找不到错误。 我有三个连接到SQL Server的下拉菜单。 当我加载页面时，第一个下拉列表已被填充。 从第一个下拉列表中选择一个值后，页面将从脚本中调用函数“ 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'的内容（包括清除第三个下拉列表。第二个选择将替换div'third'的内容。

您使用ajax抓取的页面将仅返回适当部分的html代码段。 替换功能将对适当的页面使用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>