AJAX Multiple Drop Downs

时间:2012-04-20 23:26:40

标签: php javascript html ajax drop-down-menu

我正在关注此网站以进行多次下拉:Roshan's Blog

大部分都在工作,我只是遇到了第3个下拉框的问题 (Dropdown1:Clients,Dropdown2:Location,Dropdown3:Zone)

到目前为止,在我的页面上,如果我查看源代码,在选择第一个下拉列表(Client1)后,第二个下拉语句显示:
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog-location" onchange="getZone(Client1,this.value)">

这就是我需要的,但是现在,当我点击第二个下拉菜单中的一个选项时,它不会通过getZone()脚本放置。 &#39; zonediv&#39;没有变化,我不确定其余的是否正在进行。如果我自己加载getZone.php并将我自己的GET语句放入URL中,我会得到结果,但是我无法在页面中获取它们,我会调用下拉列表。

我可能只是错过了一些小事,但我已经看了很久,以至于我无法弄明白。

HTML:

<select style="width: 150px;" name="add-event-dialog-client_name" id="add-event-dialog-client_name" onchange="getLocation(this.value)">
                    <?php
                        echo "<option selected='selected' disabled='disabled'>-Client Name-</option>";
                        $result = mysql_query("SELECT DISTINCT client_name FROM spc_clients");
                        while($row = mysql_fetch_array($result)){
                           echo "<option value='".$row['client_name']."'>".$row['client_name']."</option>";
                        }
                    ?>
               </select>
               <p id="locationdiv">
               <select style="width: 150px;" name="add-event-dialog-location" id="add-event-dialog-location" disabled="disabled">
                    <option>Select Client First</option>
               </select>
               </p>
               <p id="zonediv">
               <select style="width: 150px;" name="add-event-dialog-zone" id="add-event-dialog-zone" disabled="disabled">
                    <option>Select Location First</option>
               </select>
               </p>

两个JS函数:

function getLocation(client_name) {     
    var strURL="display/getLocation.php?client_name="+client_name;
    var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('locationdiv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

function getZone(client_name,location) {        
    var strURL="display/getZone.php?client_name="+client_name+"&location="+location;
    var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('zonediv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

getLocation.php:

<?php 
include 'connect.php';

$client = $_GET['client_name'];

$query="SELECT location FROM spc_clients WHERE client_name='$client'";
$result=mysql_query($query) or die(mysql_error());

?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone(<?=$client?>,this.value)">
<option selected='selected' disabled='disabled'>-Location-</option>
<?php 
while($row = mysql_fetch_array($result)){
    echo "<option value='".$row['location']."'>".$row['location']."</option>";}
?>
</select>

getZone.php:

<?php 
include 'connect.php';

$client = $_GET['client_name']; echo $client;
$location = $_GET['location']; echo $location;

$query="SELECT zone FROM spc_clients WHERE (client_name='$client' &&     location='$location')";
$result=mysql_query($query) or die(mysql_error());
?>

<select style="width: 150px;" id="add-event-dialog-zone" name="add-event-dialog-zone">
<option selected='selected' disabled='disabled'>-Zone-</option><option><?php 
while($row = mysql_fetch_array($result)){
    echo $row['zone'];}
?>
</option>
</select>

1 个答案:

答案 0 :(得分:0)

尝试在Client1周围添加引号 - 没有引号,javascript认为它是变量,并且由于您没有定义任何名为Client1的变量,因此您收到错误。在它周围加上引号使它成为一个字符串,这是你想传递给getZone()的字符串。

尝试将其放入getLocation.php:

<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$client?>',this.value)">

如果您的任何客户名称中包含引号,则必须确保将其转义,请参阅此处了解如何执行此操作: Pass a PHP string to a JavaScript variable (and escape newlines)