0
我有一個形式，是目前網上和運作 - 我花了昨天大部分的搜索和執行我的第一套的下拉框的Ajax解決方案。但是我想添加一組三個下拉選擇框到表單中。前兩個沒什麼大不了的。它們已被添加到表單中，並且在表單初始加載時從兩個MYSQL表中動態生成。負載下拉選項動態通過Ajax PHP
但是，第三個下拉菜單證明有點棘手。
我在窗體上已經有一組下拉列表，它們是在多步驟過程中動態生成的（即選擇第一個下拉列表，然後通過AJAX在第二個下拉列表中加載列表，選擇第二個下拉列表然後通過基於該輸入的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>
提前任何幫助非常感謝。
我很欣賞你的意見，並且可能會把它們用在旅途中，但我想我只是不清楚如何將它們應用到我的當前腳本中。不過，我會嘗試回答我自己的問題，因爲我在網上發現了一個基本上完全符合我想要的腳本（稍作修改）。我將在下面的答案中發佈它，但這裏是鏈接：[link] http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-從數據庫-使用的Ajax和 - php.html [/鏈接] – Michael