AJAX多重下拉

问题描述

我正在关注这个网站进行多个下拉列表：

I'm looking off of this site to make a multiple drop down: Roshan's Blog

其中大部分是工作我只是第三个下拉框出现问题。

（Dropdown1：客户端，Dropdown2：位置，Dropdown3：Zone）

And most of it is working, I'm just having a problem with the 3rd drop down box.
(Dropdown1: Clients, Dropdown2:Location, Dropdown3:Zone)

到目前为止，在我的页面上，如果我看源码，选择第一个下拉列表（Client1）后，第二个下拉列表显示：

< select style =width：150px ; id =add-event-dialog-locationname =add-event-dialog-locationonchange =getZone（Client1，this.value）>

On my page so far, if I look at the source, after selecting the first dropdown(Client1), the second dropdown statement says:
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog-location" onchange="getZone(Client1,this.value)">

这是我需要的，但现在，当我点击第二个下拉列表中的一个选项时，它不会通过getZone（）脚本。 Zonediv没有变化，我不知道其余的是否通过。如果我自己加载getZone.php并将我自己的GET语句放入URL中，我会得到结果，但是我无法在页面中找到它，因为我正在调用下拉列表。

Which is what I need, but now, when I click on one of the options in the second drop down, it is not placing through the getZone() script. The 'zonediv' is not changing, and I'm not sure if the rest is going through or not. If I load the getZone.php by itself and place in my own GET statements into the URL, I get results, but I can't get them within the page I'm calling the dropdowns from.

我可能只是错过了一些小小的东西，但是我一直在看这么长时间，我根本无法想像。

I'm probably just missing something small, but I've been looking at it so long, that I just can't figure it out.

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：

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：

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>

推荐答案

尝试在Client1上放置引号 - 不带引号，javascript认为它是一个变量，由于您尚未定义任何名为Client1的变量，因此您将收到错误。在它周围引用它使它成为一个字符串，这是你想传递给getZone（）。

Try putting quotes around Client1 -- without quotes, javascript thinks it's a variable, and since you haven't defined any variable called Client1, you're getting an error. Putting quotes around it makes it a string, which is what you want to pass to getZone().

尝试将其放在getLocation.php中：

Try putting this in getLocation.php:

< select style = width：150px; id =add-event-dialog-locationname =add-event-dialog-locationonchange =getZone（'<？= $ client？>'，this.value）>

如果您的任何客户名称中有引号，您必须确保逃脱他们，请参阅这里： b $ b 。

If any of your Client names have quotation marks in them, you'll have to make sure to escape them, see here for how to do that:Pass a PHP string to a JavaScript variable (and escape newlines).

这篇关于AJAX多重下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！