我尝试使用AJAX调用在PHP上创建可靠的下拉列表。 MySQL表上有9列。我找到了一个示例代码。有3个下拉列表。我试着增加它们。
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
<script type="text/javascript">
function ajaxFunction(choice)
{
{
alert(choice.options.length);}
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
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)
{
//alert(httpxml.responseText);
var myObject = JSON.parse(httpxml.responseText);
for(j=document.myForm.state.options.length-1;j>=0;j--)
{
document.myForm.state.remove(j);
}
var state1=myObject.value.state1;
var optn = document.createElement("OPTION");
optn.text = 'Select State';
optn.value = '';
document.myForm.state.options.add(optn);
for (i=0;i<myObject.state.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.state[i];
optn.value = myObject.state[i];
document.myForm.state.options.add(optn);
if(optn.value==state1){
var k= i+1;
document.myForm.state.options[k].selected=true;
}
}
//////////////////////////
for(j=document.myForm.city.options.length-1;j>=0;j--)
{
document.myForm.city.remove(j);
}
var city1=myObject.value.city1;
//alert(city1);
for (i=0;i<myObject.city.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.city[i];
optn.value = myObject.city[i];
document.myForm.city.options.add(optn);
if(optn.value==city1){
document.myForm.city.options[i].selected=true;
}
}
////////////////////
for(j=document.myForm.country.options.length-1;j>=0;j--)
{
document.myForm.country.remove(j);
}
var name1=myObject.value.name1;
var optn = document.createElement("OPTION");
optn.text = 'Select Name';
optn.value = '';
document.myForm.country.options.add(optn);
for (i=0;i<myObject.name.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.name[i];
optn.value = myObject.name[i];
document.myForm.country.options.add(optn);
if(optn.value==name1){
var k= i+1;
document.myForm.name.options[k].selected=true;
}
}
///////////////////////////
document.getElementById("txtHint").style.background='#00f040';
document.getElementById("txtHint").innerHTML='done';
//setTimeout("document.getElementById('txtHint').style.display='none'",3000)
}
}
var url="ajax-dd3ck.php";
var country=myForm.country.value;
if(choice != 's1'){
var state=myForm.state.value;
var city=myForm.city.value;
var name=myForm.name.value;
}else{
var state='';
var city='';
var name='';
}
url=url+"?country="+country;
url=url+"&state="+state;
url=url+"&city="+city;
url=url+"&name="+name;
url=url+"&id="+Math.random();
myForm.st.value=state;
//alert(url);
document.getElementById("txtHint2").innerHTML=url;
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
document.getElementById("txtHint").innerHTML="Please Wait....";
document.getElementById("txtHint").style.background='#f1f1f1';
}
</script>
</head>
<body >
</head>
<body>
<div id="txtHint" style="width : 100px;background-color: #cccc33;">Message area</div>
<br><br>
<form name="myForm" action='ajax-dd3-details.php' method='post'">
<input type=hidden name=st value=0>
<table width=500>
<tr><td >
Select Country<br><select name="country" id="s1" onchange="ajaxFunction(this);">
<option value=''>Select One</option>
<?Php
//require "../include/z_db1.php";
require "config.php";// connection to database
$sql="select distinct country from student5 ";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[country]>$row[country]</option>";
}
?>
</select>
</td><td ><select name=state id="s2" onchange="ajaxFunction(this)";>
<option value=''>Select One</option></select></td>
<td ><select name=city id="s3" onchange="ajaxFunction(this);">
<option value=''>Select One</option></select></td>
<td ><select name=sex id="s4" onchange="ajaxFunction(this);">
<option value=''>Select One</option></select></td>
</tr></tr>
<tr><td colspan=3><input type=submit value='Submit'></td></tr>
</form>
</table>
<br><br>
<div id="txtHint2"></div>
</body>
</html>
我编辑了这个php文件并添加了以下代码。因为我想从mysql添加名称列到下拉列表：
////////////////////
for(j=document.myForm.name.options.length-1;j>=0;j--)
{
document.myForm.name.remove(j);
}
var name1=myObject.value.name1;
var optn = document.createElement("OPTION");
optn.text = 'Select Name';
optn.value = '';
document.myForm.name.options.add(optn);
for (i=0;i<myObject.name.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.name[i];
optn.value = myObject.name[i];
document.myForm.name.options.add(optn);
if(optn.value==name1){
var k= i+1;
document.myForm.name.options[k].selected=true;
}
}
我还编辑了另一个php文件：
<?Php
require "config.php"; // connection details
error_reporting(0);// With this no error reporting will be there
//////////
/////////////////////////////////////////////////////////////////////////////
$country=$_GET['country'];//
//$country='IND'; // To check you can use this
$state1=$_GET['state'];
$city1=$_GET['city'];
$name1=$_GET['name'];
//$state1="Andhra Pradesh";
///////////// Validate the inputs ////////////
// Checking country variable ///
if((strlen($country)) > 0 and (!ctype_alpha($country))){
echo "Data Error";
exit;
}
// Checking state variable (with space ) ///
if ((strlen($state1)) > 0 and ctype_alpha(str_replace(' ', '', $state1)) === false) {
echo "Data Error";
exit;
}
// Checking class variable ///
if((strlen($name1)) > 0 and (!ctype_alpha($name1))){
echo "Data Error";
exit;
}
/////////// end of input validation //////
if(strlen($country) > 0){
$q_country="select distinct(state) from student5 where country = '$country'";
}else{
$q_country="select distinct(state) from student5";
}
//echo $q_country;
$sth = $dbo->prepare($q_country);
$sth->execute();
$state = $sth->fetchAll(PDO::FETCH_COLUMN);
$q_state="select distinct(city) from student5 where ";
if(strlen($country) > 0){
$q_state= $q_state . " country = '$country' ";
}
if(strlen($state1) > 0){$q_state= $q_state . " and state='$state1'";}
$sth = $dbo->prepare($q_state);
$sth->execute();
$city = $sth->fetchAll(PDO::FETCH_COLUMN);
$q_name="select distinct(name) from student5 where ";
if(strlen($country) > 0){
$q_state= $q_state . " country = '$country' ";
}
if(strlen($state1) > 0){$q_state= $q_state . " and state='$state1'";}
if(strlen($city1) > 0){$q_city= $q_city . " and city='$city1'";}
$sth = $dbo->prepare($q_city);
$sth->execute();
$name = $sth->fetchAll(PDO::FETCH_COLUMN);
$main = array('state'=>$state,'city'=>$city,'name'=>$name1, 'value'=>array("state1"=>"$state1","city1"=>"$city1", "name"=>"$name1"));
echo json_encode($main);
////////////End of script /////////////////////////////////////////////////////////////////////////////////
?>
我在上面添加了代码：
$q_name="select distinct(name) from student5 where ";
if(strlen($country) > 0){
$q_state= $q_state . " country = '$country' ";
}
if(strlen($state1) > 0){$q_state= $q_state . " and state='$state1'";}
if(strlen($city1) > 0){$q_city= $q_city . " and city='$city1'";}
$sth = $dbo->prepare($q_city);
$sth->execute();
$name = $sth->fetchAll(PDO::FETCH_COLUMN);
当我通过LAMP打开它时，新的下拉列表不起作用。并且I got this error。我能解决这个问题吗？
答案 0 :(得分：0)
document.myForm.name.options.length这会给你错误。您必须使用name select来获取options length。所以像document.myForm.country.options.length
所以在你的场景中，你必须这样做。
在HTML中
<select name=country id='s1' onchange=ajaxFunction(this);>
在JS中
function ajaxFunction(choice) {
alert(choice.options.length);}
答案 1 :(得分：0)
我可以看到一些小错误也无济于事！
<form name="myForm" action='ajax-dd3-details.php' method='post' ">
<input type=hidden name=st value=0>
表单开始标记的末尾有一个虚假的双引号，应该只是：
<form name="myForm" action='ajax-dd3-details.php' method='post'>
你真的应该在你的领域用引号括起价值......
<input type='hidden' name='st' value='0' />
类似于表单中的各种其他元素，例如： -
<select name=country id='s1' onchange=ajaxFunction('s1');>
应该是
<select name='country' id='s1' onchange="ajaxFunction('s1')">
我知道其他人可能不同意，特别是因为HTML5似乎对这种类型的东西更加放松，但采用这种方法并帮助确定事情的发展方向是很好的做法。