通过 Ajax PHP 动态加载下拉选择
Posted
技术标签:
【中文标题】通过 Ajax PHP 动态加载下拉选择【英文标题】：Load Drop Down Selection Dynamically via Ajax PHP 【发布时间】：2011-11-12 12:35:51 【问题描述】：我有一个当前在线且正常运行的表单 - 我昨天大部分时间都在为我的第一组下拉框搜索和实施 AJAX 解决方案。但我想在表单中添加一组额外的三个下拉选择框。前两个没什么大不了的。它们已经添加到表单中，并且是在表单初始加载时从两个 mysql 表动态生成的。
但是，事实证明第三个下拉菜单有点棘手。
我的表单上已经有一组下拉列表，它们是在多步骤过程中动态生成的（即选择第一个下拉列表，然后通过 AJAX 在第二个下拉列表中加载列表，选择第二个下拉列表-down 然后根据该输入通过 AJAX 动态加载第三个下拉列表中的列表。
这很好用。但是，我没有编写代码，也无法完全了解它的工作原理。我非常了解 php，但 AJAX 的东西让我感到困惑，这是我需要了解新下拉菜单的部分。
在这组新的下拉列表中，第二个列表不依赖于第一个。第一个和第二个列表都在页面加载时加载。只有第三个下拉菜单必须通过 AJAX 加载，但在这种情况下，它取决于第一个和第二个选择选项。
因此，换句话说，用户进行了第一个选择，然后进行了第二个选择（这不依赖于第一个）。但是，在进行第二次选择时，第三个下拉列表会根据为第一个和第二个列表所做的选择填充 AJAX。
我不知道该怎么做。
我在下面包含我当前的代码。这有点冗长，但我不知道是否可以构建已经存在的 AJAX 和 PHP 函数以最小化新代码。另外不知道新代码会不会和旧代码冲突，所以在下面提供。
我知道这是一个相对较高的要求（至少在我看来是这样），但我真的需要完成这个表单，而且我整天都在研究这个实现，似乎无法理解 AJAX代码足够好，可以自己完成。
这是我当前的代码（没有很多额外的格式化代码）：
<?php
$dbh = mysql_connect($hostname, $username, $password)
or die("Unable to connect to MySQL");
$selected = mysql_select_db("evaluate_motoroilevaluator",$dbh);
if( isset($_GET['ajax']) )
//In this if statement
switch($_GET['ID'])
case "LBox2":
$query = sprintf("SELECT * FROM vehicle_data_makes WHERE List1Ref=%d",$_GET['ajax']);
break;
case "LBox3":
$query = sprintf("SELECT * FROM vehicle_data_all WHERE List2Ref=%d",$_GET['ajax']);
break;
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_assoc($result))
echo "<option value='$row['ID']'>$row['Name']</option>\n";
mysql_close($dbh);
exit; //we're finished so exit..
if (!$result = mysql_query("SELECT * FROM vehicle_data_years"))
echo "Database is down";
//for use with my FIRST list box
$List1 = "";
while ($row = mysql_fetch_assoc($result))
$List1 .= "<option value='$row['ID']'>$row['Name']</option>\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function ajaxFunction(ID, Param)
//link to the PHP file your getting the data from
//var loaderphp = "register.php";
//i have link to this file
var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";
//we don't need to change anymore of this script
var xmlHttp;
try
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
catch(e)
// Internet Explorer
try
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
catch(e)
try
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
catch(e)
alert("Your browser does not support AJAX!");
return false;
xmlHttp.onreadystatechange=function()
if(xmlHttp.readyState==4)
//the line below reset the third list box incase list 1 is changed
var sSelect = document.getElementById(ID);
for(options in sSelect.options) sSelect.remove(options);
var opt = document.createElement("option");
sSelect.options.add(opt);
var data = xmlHttp.responseText;
results = data.split('\n');
for(r in results)
var d = results[r];
match = d.match(/<option value='(.*?)'>([^<]*)<\/option>/);
if (match != null)
var opt = document.createElement("option");
opt.value= match[1];
opt.text = match[2];
sSelect.options.add(opt);
xmlHttp.open("GET", loaderphp+"?ID="+ID+"&ajax="+Param,true);
xmlHttp.send(null);
</script>
</head>
<body>
<form enctype="multipart/form-data" action ="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="myForm" accept-charset="utf-8">
<ul class="form-section">
<li id="cid_1" class="form-input-wide">
<div class="form-header-group">
<h1 id="header_1" class="form-header">
Enter Vehicle Info
</h1>
<div id="subHeader_1" class="form-subHeader">
Tell us about your vehicle
</div>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-left" id="label_3" for="input_3"> Vehicle Model Year<span class="form-required">*</span> </label>
<div id="cid_3" class="form-input">
<select class="form-dropdown" style="width:150px" name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);">
<option value=''></option>
<?php
echo $List1;
?>
</select>
</div>
</li>
<li class="form-line" id="id_4">
<label class="form-label-left" id="label_4" for="input_4"> Vehicle Make<span class="form-required">*</span> </label>
<div id="cid_4" class="form-input">
<select class="form-dropdown" style="width:150px" name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);">
<option value=''> </option>
<!-- OK the ID of this list box is LBox2 as refered to above -->
</select> (allow time to load following above selection)
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-left" id="label_5" for="input_5"> Vehicle Model<span class="form-required">*</span> </label>
<div id="cid_5" class="form-input">
<select class="form-dropdown" style="width:150px" name="list3" id="LBox3">
<option value=''> </option>
<!-- OK the ID of this list box is LBox3 Same as above -->
</select> (allow time to load following above selection)
</div>
</li>
<!-- ----------------------NEW STUFF ----------------------------- -->
<?php
//for use with my FIRST motor oil drop-down: viscosity
$Viscosity_List = "";
$vis_result = mysql_query("SELECT * FROM viscosity");
while ($vis_row = mysql_fetch_assoc($vis_result))
$Viscosity_List .= "<option value='$vis_row['id']'>$vis_row['name']</option>\n";
?>
<?php
//for use with my SECOND motor oil drop-down: Brand
$Brand_List = "";
$brand_result = mysql_query("SELECT * FROM oil_brand ORDER BY brandname");
// $brand_result = asort($brand_result);
while ($brand_row = mysql_fetch_assoc($brand_result))
$Brand_List .= "<option value='$brand_row['brandid']'>$brand_row['brandname']</option>\n";
?>
<li class="form-line" id="id_12">
<label class="form-label-left" id="label_12" for="input_12">
Motor Oil Viscosity<span class="form-required">*</span>
</label>
<div id="cid_12" class="form-input">
<select class="form-dropdown validate[required]" style="width:150px" id="input_12" name="oil_viscosity">
<option> </option>
<?php
echo $Viscosity_List;
?>
</select>
</div>
</li>
<li class="form-line" id="id_13">
<label class="form-label-left" id="label_13" for="input_13">
Motor Oil Brand<span class="form-required">*</span>
</label>
<div id="cid_13" class="form-input">
<select class="form-dropdown validate[required]" style="width:150px" id="input_13" name="oil_brand">
<option> </option>
<?php
echo $Brand_List;
?>
</select>
</div>
</li>
<li class="form-line" id="id_14">
<label class="form-label-left" id="label_14" for="input_14">
Motor Oil Product<span class="form-required">*</span>
</label>
<div id="cid_14" class="form-input">
<select class="form-dropdown validate[required]" style="width:150px" id="input_14" name="oil_product">
<option> </option>
<option value="Option 1"> Option 1 </option>
<option value="Option 2"> Option 2 </option>
<option value="Option 3"> Option 3 </option>
</select>
</div>
</li>
<!-- -------------------------------- END NEw STUFF ------------------------------- -->
<li class="form-line" id="id_2">
<button id="input_2" type="submit" class="form-submit-button">
Submit Form
</button>
</li>
</form>
</body>
</html>
非常感谢您的任何帮助。
【问题讨论】：
【参考方案1】：好的，我注意到的第一件事是您错过了检查“onstatechange”功能的状态。应在 readyState 检查中添加以下内容：&& status == 200
第二件事是不要陷入逻辑中。
第一个下拉菜单可以或不能由用户修改 - 因此它不会影响其他两个下拉菜单。
第二个下拉菜单影响第三个，因此是排序的“父级”。
第三个下拉菜单从第二个下拉菜单中获得提示，应该使用 ajax 加载。
你的 PHP 看起来不错，我没有看到任何明显的东西。所以看来你的问题与Javascript有关。
将网页视为一系列嵌套节点。所有节点的祖父母都是“文档”。您可以通过其“id”属性在文档中找到任何 HTML 节点，如下所示：
document.getElementById("node-id-here");
要有效地使用它，您只需这样做：
var node = document.getElementById("someNode");
if(node != null)
var list = myAjaxResponse;
node.innerHTML = list;
这是一个关于如何使用 Javascript 的非常基本的示例，还有许多更全面的 Javascript 指南。此外，一旦您学习了 Javascript，就可以随意实现几个不同的 JS 库之一，例如 jQuery 等。
祝你好运！
H
【讨论】：
我很欣赏您的 cmets，并且可能会在以后使用它们，但我想我对如何将它们应用到我当前的脚本还不够清楚。不过，我将尝试在下面回答我自己的问题，因为我在网上找到了一个脚本，它基本上完全符合我的要求（稍作修改）。我将在下面的答案中发布它，但这是链接：[link]roshanbh.com.np/2008/01/…【参考方案2】：事实证明，通过一些持续的搜索，我终于在此处发布的脚本中找到了答案：
http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-from-database-using-ajax-and-php.html
这不是我所需要的，但它非常接近，并且一些修改完全符合我的需要。根据脚本中的值创建表，或者，如果您的表已经存在，就像我的情况一样，请注意如何编辑/重命名脚本中的所有变量/表/列名称，它会做一个很棒的工作。
在我的例子中，虽然我并不真的需要“三步”下拉菜单（而且我的数据库表结构也没有为此提供方法），但我还是按原样使用了脚本，但我删除了findState.php 文件中 mysql 查询中的“where”子句，从而列出该表中的所有条目，而不是仅列出与第一个选择框中的 ID 匹配的条目。
希望如果您从上面的链接下载文件并打开它们，上面的解释会更清楚。
抱歉，我无法解释所有的编程。我不是程序员，并不总是完全理解所有代码，但我很擅长使用其他人编写的脚本并为自己的目的修改它们。
如有需要，请随时提出问题。我会尽量回答。
【讨论】：
以上是关于通过 Ajax PHP 动态加载下拉选择的主要内容，如果未能解决你的问题，请参考以下文章
来自 PHP/MySQL 的 Ajax 加载生成带有变量传递的 Bootstrap 下拉列表
jquery easyui combobox如何动态加载.json数据