大家好，
我有多个下拉列表，我必须使用AJAX请求填充，但我无法做到。
我不知道我的错误在哪里，因为我是新的使用AJAX。我在网上查了一下，但不幸的是我不能完全理解他们的解释。
谁能给我解释一下……我做错了什么?提前感谢那些谁会回复我的帖子。
顺便说一下，这些是我的编码页上的代码。
<html>
<head>
<script type="text/javascript">
function populateDropDown(choice){
var httpxml;
try{
httpxml = new XMLHttpRequest();
}
catch (e){
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged(){
if (httpxml.readystate==4){
var myObject = JSON.parse(httpxml.responseText);
for (j=document.get_forms.province.options.length-1;j>=0;j--){
document.get_forms.province.remove(j);
}
var province1=myObject.value.province1;
var optn = document.createElement("OPTION");
optn.text = 'Select Region First';
optn.value = '';
document.get_forms.province.options.add(optn);
for(i=0;i<myObject.province.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.province[i];
optn.value = myObject.province[i];
document.get_forms.province.options.add(optn);
if (optn.value==province1){
var k = i + 1;
document.get_forms.province.options[k].selected=true;
}
}
for (j=document.get_forms.municipality.options.length;j>=0;j--){
document.get_forms.municipality.remove(j);
}
var municipality1 = myObject.value.municipality1;
for (i=0;i<myObject.municipality1.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.municapility[i];
optn.value = myObject.municipality[i];
document.get_forms.municipality.options.add(optn);
if (optn.value==municapility1){
document.get_forms.municipality.options[i].selected = true;
}
}
for (j=document.get_forms.barangay.options.length;j>=0;j--){
document.get_forms.barangay.remove(j);
}
var barangay1 = myObject.value.barangay1;
for (i=0;i<myObject.barangay1.length;i++){
var optn = document.createElement("OPTION");
optn.text = myObject.barangay[i];
optn.value = myObject.barangay[i];
document.get_forms.barangay.options.add(optn);
if (optn.value==barangay1){
document.get_forms.barangay.options[i].selected = true;
}
}
var url = "populate.php";
var region = get_forms.region.value;
if (choice != 's1'){
var province = get_forms.province.value;
var municipality = get_forms.municipality.value;
var barangay = get.forms.barangay.value;
}
else{
var province = '';
var municipality = '';
var barangay = '';
}
url = url + "?region="+region;
url = url + "&province="+province;
url = url + "&municipality="+municipality;
url = url + "$barangay="+barangay;
url = url + "&id="+Math.random();
get_forms.st.value = province;
httpxml.onreadystatechange = stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
}
}
}
</script>
</head>
<fieldset>
<form name='get_forms' action='get_forms.php' method='post'>
Region : <select name='region' id='region_id' onChange="populateDropDown(s1);" required>
<option value=''> Please Select A Region</option>
<?php
require 'config.php';
$sql='SELECT DISTINCT region FROM roster';
foreach ($conn->query($sql) as $row) {?>
<option value="<?php echo $row['region'];?>"><?php echo $row['region'];?></option>
<?php }
?>
</select>
<br><br>
<input type=text name=st value=0><br><br>
Province : <select name='province' id='province_id' onChange="populateDropDown(s2);" required>
<option value="">Please Select Region First</option>
</select>
<br><br>
Municipality : <select name='municipality' id='municipality_id' onChange="populateDropDown(s3);" required>
<option value="">Please Select Province First</option>
</select>
<br><br>
Barangay : <select name='barangay' id='barangay_id' onChange="populateDropDown(s4);" required>
<option value=""> Please Select Municipality First </option>
</select>
<br><br>
Period: <select name='period' id='period_id' required>
<option value=''> Please Select Compliance Period </option>
<?php
require 'config.php';
$sql='SELECT DISTINCT period FROM compliance';
foreach($conn->query($sql) as $row){?>
<option value="<?php echo $row['period'];?>"><?php echo $row['period'];?></option>
<?php }
?>
</select>
<br><br>
Form Type: <select name='form_type' id='form_type_id' required>
<option value=''> Select Form Type </option>
<?php
require 'config.php';
$sql='SELECT DISTINCT form_type FROM compliance ORDER BY form_type ASC';
foreach($conn->query($sql) as $row){?>
<option value="<?php echo $row['form_type'];?>"><?php echo $row['form_type'];?></option>
<?php }
?>
</select>
<br><br>
<input type='submit' value='GET FORMS'>
</form>
</fieldset>
这些是我的代码在我的populate。php页面。
<?php
require 'config.php'
$region = $_GET['region'];
$province1 = $_GET['province'];
$municipality1 = $_GET['municipality'];
$barangay1 = $_GET['barangay'];
$sql_prov = "SELECT DISTINCT province FROM roster WHERE region ='$region'";
$query=$conn->prepare($sql_prov);
$query->execute();
$province= $query->fetchALL(PDO::FETCH_COLUMN);
$sql_mun = "SELECT DISTINCT municipality FROM roster WHERE province = '$province1";
$query=$conn->prepare($sql_mun);
$query->execute();
$municipality = $query->fetchALL (PDO::FETCH_COLUMN);
$sql_bar = "SELECT DISTINCT barangay FROM roster WHERE municipality = '$municipality1' AND province = '$province1'";
$query=$conn->prepare ($sql_bar);
$query->execute();
$barangay = $query->fetchALL (PDO::FETCH_COLUMN);
$main = array('province'=>$province,'municipality'=>$municipality,'barangay'=>$barangay,'value'=>array("province1"=>"$province1","municipality1"=>"$municipality1","barangay1"=>"$barangay1"));
echo json_encode($main);
?>
我只是让您了解Ajax是如何工作的。你需要改变Ajax.php的输出，从数据库返回你的选项。
<select id="select1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select2">
</select>
<select id="select3">
</select>
<script type="text/javascript">
$(document).on('change', "#select1", function()
var variable = $("#select1").val();
var action = 'get_select2_options';
$.ajax({
type: "post",
url:"ajax.php",
data:{action:action: variable:variable},
success: function(data){
$("#select2").html(data);
}
});
});
$(document).on('change', "#select2", function()
var variable = $("#select2").val();
var action = 'get_select3_options';
$.ajax({
type: "post",
url:"ajax.php",
data:{action:action: variable:variable},
success: function(data){
$("#select3").html(data);
}
});
});
</script>
<?php
if($_POST['action']=='get_select2_options'){
echo '<option>2-1</option><option>2-2</option>';
}
if($_POST['action']=='get_select3_options'){
echo '<option>3-1</option><option>3-2</option>';
}
?>