[英]How to display AJAX results in a HTML drop down menu
我正在創建一些下拉菜單,這些菜單取決於之前選擇的下拉值。
到目前為止,我已經能夠成功使用ajax從php腳本中獲取數據,但是,我不確定如何將該數據附加到名為AREAS的第二個下拉列表中。
HTML / Javascript / AJAX
<html>
<head>
<title>IPSLA Report</title>
<script type="text/javascript">
function changeSelections() {
var departments = document.selections.department;
var areas = document.selections.areas;
var months = document.selections.months;
var years = document.selections.years;
var s = document.getElementById("department");
switch(departments.selectedIndex) {
case 0:
areas.options.length = 0;
months.options.length = 0;
years.options.length = 0;
areas.options[0] = new Option("Select an Area");
months.options[0] = new Option("Select a Month");
years.options[0] = new Option("Select a Year");
departments.options[0].selected = true;
break;
default:
months.options.length = 0;
years.options.length = 0;
months.options[0] = new Option("Select a Month");
years.options[0] = new Option("Select a Year");
var pass = s.options[s.selectedIndex].text;
ajaxFunction(pass);
}
}
function ajaxFunction(pass) {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest();
}
catch(e) {
try {
ajaxRequest = new ActiveXObjext("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajaxRequest = new ActiveXObjext("Microsoft.XMLHTTP");
}
catch(e) {
alert("Please use another browser");
return false;
}
}
}
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById("areas");
if (ajaxDisplay != null) {
ajaxDisplay.options.selectedIndex.text = ajaxRequest.responseText;
}
else {
document.write("NULL!!!");
}
}
}
if (pass == "CRAN") {
var active_id = '0';
}
var queryString = "?active_id=" + active_id;
ajaxRequest.open("GET","db_connect.php" + queryString, true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="select">
<form name="selections" id="selections" action="">
<select name="department" id="department" onChange="changeSelections()">
<option value="none">Select Department</option>
<option value="none">CRAN</option>
<option value="none">BackBone</option>
<option value="none">Datacenter</option>
<option value="none">Enterprise</option>
</select>
<select name="areas" id="areas" onChange="changeMonth()">
<option value="none">Select an Area</option>
</select>
<select name="months" id="months" onChange="changeYear()">
<option value="none">Select a Month</option>
</select>
<select name="years" id="years" onChange="go(this)">
<option value="none">Select a Year</option>
</select>
</form>
</div>
<div id="image">
</div>
<div id="incidents">
</div>
</div>
</body>
</html>
PHP Script
<?php
$host = "";
$dbName = "";
$username = "";
$password = "";
$conn = mysql_connect($host,$username,$password);
$db = mysql_select_db($dbName,$conn);
$dept_id = $_GET['id'];
$area_query = "SELECT area_name FROM incident_area WHERE FK_dept= '$dept_id'";
$area_result = mysql_query($area_query);
$options = "";
while ($area_row = mysql_fetch_assoc($area_result)) {
#$options .= '<option value="'.$area_row['area_name'].'">'.$area_row['area_name'].'</option>';
$options .= $area_row['area_name'];
}
echo $options;
?>
~
因此,基本上,我只需要知道如何將AJAX收集的值附加到下拉菜單“區域”。
這個網站幫助了我很大的時候,也這里 。 jQuery是必經之路。 它將允許您將數據附加到html中並創建要查找的動態下拉列表。
Javascript
// needs hotlink to jquery file, for library to work right.
var options = "";
$(document).ready(function(){
$.post("./file.php", { postVariableInPHPFile: "some string" }, function(data) {
options = data; // data is the return from the AJAX call
});
});
根據您希望從PHP調用中獲得多少數據,您可能需要將結果串聯起來,以更喜歡獲得完整列表的方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.