我有一个目前在线并运行的表单 - 我昨天花了大部分时间为我的第一组下拉框搜索和实现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>
非常感谢您的任何帮助。
答案 0 :(得分：0)
好的，我注意到的第一件事就是你错过了检查“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等。
祝你好运！ħ
答案 1 :(得分：0)
事实证明，通过一些继续搜索，我终于在一个脚本中找到了答案：
这不完全是我所需要的，但它非常接近，并且进行了一些修改，正是我需要做的。根据脚本中的值创建表，或者，如果表已经存在，就像我的情况一样，只需要小心如何编辑/重命名脚本中的所有变量/表/列名称，它将执行很棒的工作。
在我的情况下，虽然我真的不需要“三步”下拉（并且我的数据库表结构没有提供它的方法），我几乎按原样使用了脚本，但是我删除了来自findState.php文件中mysql查询的“where”子句，因此列出该表中的所有条目，而不是仅列出与第一个选择框中的ID匹配的条目。
希望如果您从上面的链接下载文件并打开它们，上面的解释会更清楚。
抱歉，我无法解释所有的编程。我不是程序员，并不总是完全理解所有代码，但我非常擅长于编写其他人编写的脚本并根据自己的目的修改它们。
如果需要，请随意提问。我会尽力回答。