AJAX多重下拉列表 [英] AJAX Multiple Drop Downs
问题描述
我找过这个网站，使多下拉：<一href="http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-from-database-using-ajax-and-php.html"相对=nofollow>罗山的博客
和大部分的工作，我只是具有第三下拉框中的一个问题。
（Dropdown1：客户，Dropdown2：位置，Dropdown3：区）
在我的网页，到目前为止，如果我看源，选择第一个下拉（客户端1）之后，第二个下拉声明说：
＆LT;选择风格=宽度：150像素; ID =添加事件，对话框的位置NAME =添加事件，对话框的位置的onchange =getZone（客户端1，THIS.VALUE）＆GT;
这正是我需要的，但现在，当我在第二个下拉点击的选项之一了，它不是将通过getZone（）脚本。在zonediv并没有改变，我不知道，如果其余的经历或没有。如果我在我自己的GET语句加载getZone.php本身和地点到URL，我得到的结果，但我不能让他们的页面我打电话的。
在下拉列表中我可能只是缺少一些东西小，但我一直在寻找它这么久，我实在不明白它。
中的HTML：
＆LT;选择风格=宽度：150像素; NAME =插件事件对话框CLIENT_NAMEID =插件事件对话框CLIENT_NAME的onchange =的getLocation（THIS.VALUE）＆GT;
＆LT; PHP
回声＆LT;选项选择=选择禁用=禁用＆GT; - 客户端名称 - ＆LT; /选项＆gt;中;
$结果= mysql_query（SELECT DISTINCT CLIENT_NAME FROM spc_clients）;
而（$行= mysql_fetch_array（$结果））{
回声＆LT;期权价值='$行['CLIENT_NAME']＆gt;中。$行['CLIENT_NAME']。＆LT; /选项＆gt;中;
}
？＆GT;
＆LT; /选择＆GT;
＆其中，P的id =locationdiv＆GT;
＆LT;选择风格=宽度：150像素; NAME =添加事件，对话框的位置ID =添加事件，对话框的位置已禁用=禁用＆GT;
＆LT;选项＆GT;选择客户端首先＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆所述; / P＆GT;
＆其中，P的id =zonediv＆GT;
＆LT;选择风格=宽度：150像素; NAME =插件事件对话框区ID =插件事件对话框区已禁用=禁用＆GT;
＆LT;选项＆GT;选择位置首先＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆所述; / P＆GT;
这两个JS功能：
函数的getLocation（CLIENT_NAME）{
VAR strURL =显示/ getLocation.php CLIENT_NAME =？+ CLIENT_NAME;
VAR REQ = getXMLHTTP（）;
如果（REQ）{
req.onreadystatechange =功能（）{
如果（req.readyState == 4）{
//只有当OK
如果（req.status == 200）{
的document.getElementById（'locationdiv）的innerHTML = req.responseText。
} 其他 {
警报（有同时使用XMLHTTP是个问题：\ N+ req.statusText）;
}
}
}
req.open（GET，strURL，真正的）;
req.send（空）;
}
}
功能getZone（CLIENT_NAME，位置）{
VAR strURL =显示/ getZone.php CLIENT_NAME =？+ CLIENT_NAME +＆放大器;位置=+位置;
VAR REQ = getXMLHTTP（）;
如果（REQ）{
req.onreadystatechange =功能（）{
如果（req.readyState == 4）{
//只有当OK
如果（req.status == 200）{
的document.getElementById（'zonediv）的innerHTML = req.responseText。
} 其他 {
警报（有同时使用XMLHTTP是个问题：\ N+ req.statusText）;
}
}
}
req.open（GET，strURL，真正的）;
req.send（空）;
}
}
getLocation.php：
＆LT; PHP
包括将connect.php;
$客户端= $ _GET [CLIENT_NAME'];
$查询=从spc_clients选择位置，CLIENT_NAME ='$客户端';
$结果= mysql_query（$查询）或死亡（mysql_error（））;
？＆GT;
＆LT;选择风格=宽度：150像素; ID =添加事件，对话框的位置NAME =添加事件，对话的位置的onchange =getZone（小于？= $客户端＆GT;，THIS.VALUE）＆GT;
＆LT;选项选择=选择禁用=禁用＆GT; -Location-＆LT; /选项＆GT;
＆LT; PHP
而（$行= mysql_fetch_array（$结果））{
回声＆LT;期权价值='$行['位置']＆gt;中。$行['位置']。＆LT; /选项＆GT;;}
？＆GT;
＆LT; /选择＆GT;
getZone.php：
＆LT; PHP
包括将connect.php;
$客户端= $ _GET [CLIENT_NAME'];回声$客户端;
$位置= $ _GET ['位置'];回声$的位置;
$查询=从spc_clients这里选择区（CLIENT_NAME ='$客户端'和;＆安培;位置='$位置'）;
$结果= mysql_query（$查询）或死亡（mysql_error（））;
？＆GT;
＆LT;选择风格=宽度：150像素; ID =插件事件对话框区NAME =插件事件对话框区＆GT;
＆LT;选项选择=选择禁用=禁用＆GT; -Zone-＆LT; /选项＆GT;＆LT;选项＆GT;＆LT; PHP
而（$行= mysql_fetch_array（$结果））{
回声$行[区域];}
？＆GT;
＆LT; /选项＆GT;
＆LT; /选择＆GT;
尝试把各地的客户端1报价 - 不带引号，JavaScript的认为它是一个变量，因为你还没有定义所谓的客户端1任何变量，你得到的错误。把引号它使一个字符串，它是你想传递给getZone什么（）。
尝试把这getLocation.php：
＆LT;选择风格=宽度：150像素; ID =添加事件，对话框的位置NAME =添加事件，对话的位置的onchange =getZone（'＆LT; = $客户端＆GT;？'，THIS.VALUE）＆GT;
如果您的任何客户端名称中都有引号，你必须确保他们逃跑，在这里看到如何做到这一点： <一href="http://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-including-escaping-newlines">Pass一个PHP字符串一个Javascript变量（包括转义换行符）。
I'm looking off of this site to make a multiple drop down: Roshan's Blog
And most of it is working, I'm just having a problem with the 3rd drop down box.
(Dropdown1: Clients, Dropdown2:Location, Dropdown3:Zone)
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)">
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.
The 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>
Both of the JS Functions:
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>
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().
Try putting this in getLocation.php:
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$client?>',this.value)">
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 (including escaping newlines).
这篇关于AJAX多重下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
