多個菜單中的下拉腳本

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>