我有2个php文件。一个叫做getCategory.php。该文件用于查询sql server数据库以获取所有类别。
另一个名为getSubCategory.php。
这将查询数据库以选择与类别关联的所有子类别。
categoryId是两者之间的关系键。
然后我有一个包含2个下拉列表的文件。
一个id =“cat_id”，第二个下拉列表的id为sub_cat。
我们的要求是您从类别下拉列表中选择一个选项，第二个下拉列表（子类别下拉列表）将根据您从类别下拉列表中选择的值填充。
我已经成功地使用asp.net和经典的asp。
成功完成了这项工作我不确定如何使用php。
至少对我来说特别困难的是，类别和子类别如上所示位于两个单独的文件中。
以下是我到目前为止所设法汇总的内容，但我们非常需要您的专业协助，以帮助您以正确的方式工作。
提前多多谢谢。
<script type="text/javascript">
function getRecs()
{
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 stateck()
{
if(httpxml.readyState==4)
{
//alert(httpxml.responseText);
var myarray = JSON.parse(httpxml.responseText);
var myarray=myarray.split(",");
for(j=document.testform.subcat.options.length-1;j>=0;j--)
{
document.testform.subcat.remove(j);
}
for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);
}
}
}
var url="http://servername/path/getCategory.php";
var cat_id=document.getElementById('cat_id').value;
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
//alert(url);
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
</head>
<body>
<h1>
Requests
</h1>
<form>
<div id="tabs">
<ul>
<li><a href="#tabs-1">New Request</a></li>
<li><a href="#tabs-2">Existing Request</a></li>
<li><a href="#tabs-3">Request Details</a></li>
</ul>
<div id="tabs-1">
<div id="accordion">
<h3>Location</h3>
<div>
<p>
<div class="side-by-side clearfix">
<div>
<select name="cat_id" id="cat_id" data-placeholder="Choose a category..." class="chosen-select" style="width:500px;" onchange="getRecs();">
<option value=""></option>
</select>
</div>
<br />
<div>
<select name="sub_cat" id="sub_cat" data-placeholder="Choose a subcategory..." class="chosen-select" style="width:500px;">
<option value=""></option>
</select>
</div>
<br />
<div data-role="content">
<input type="text" name="address" id="address" value=" Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:493px;color:#999;font-size:9pt;height:20px;">
</div>
</div>
</p>
</div>
更新
开始 - 最新代码
<script type="text/javascript">
function getCats()
{
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 stateck()
{
if(httpxml.readyState==4)
{
//alert(httpxml.responseText);
var myarray = JSON.parse(httpxml.responseText);
var myarray=myarray.split(",");
for(j=document.reqform.subcat.options.length-1;j>=0;j--)
{
document.reqform.subcat.remove(j);
}
for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.reqform.subcat.options.add(optn);
}
}
}
var caturl="path/getCategory.php";
caturl=caturl+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
//alert(caturl);
httpxml.open("GET",caturl,true);
httpxml.send(null);
}
</script>
<script type="text/javascript">
function getRecs()
{
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 stateck()
{
if(httpxml.readyState==4)
{
//alert(httpxml.responseText);
var myarray = JSON.parse(httpxml.responseText);
var myarray=myarray.split(",");
for(j=document.testform.subcat.options.length-1;j>=0;j--)
{
document.testform.subcat.remove(j);
}
for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);
}
}
}
var url="path/getSubCategory.php";
var cat_id=document.getElementById('cat_id').value;
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
//alert(url);
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
</head>
<body onload="getCats()">
<h1>
Requests
</h1>
<form name="reqform" method='POST' action='processRequest.php'>
<div id="tabs">
<ul>
<li><a href="#tabs-1">New Request</a></li>
<li><a href="#tabs-2">Existing Request</a></li>
<li><a href="#tabs-3">Request Details</a></li>
</ul>
<div id="tabs-1">
<div id="accordion">
<h3>Location</h3>
<div>
<p>
<div class="side-by-side clearfix">
<div>
<select name="cat_id" id="cat_id" data-placeholder="Choose a category..." class="chosen-select" style="width:500px;" onchange="getRecs();">
<option value=""></option>
</select>
</div>
<br />
<div>
<select name="sub_cat" id="sub_cat" data-placeholder="Choose a subcategory..." class="chosen-select" style="width:500px;">
<option value=""></option>
</select>
</div>
<br />
<div data-role="content">
<input type="text" name="address" id="address" value=" Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:493px;color:#999;font-size:9pt;height:20px;">
</div>
</div>
</p>
</div>
结束 - 最新代码
[{"BuildingDisplay":"132 Mitchell Street Tax Commissioner Office - 132 Mitchell St., SW","BuildingID":"B610012","Address":"132 Mitchell St., SW","City":"Jonesboro","District":"Central","Location":"B610012 132 Mitchell Street Tax Commissioner Office","State":"GA","StreetName":"132 Mitchell St., SW","Zip":"30303","X":2227970.4292704,"Y":1364292.9044986},{"BuildingDisplay":"34 Peachtree Street - 34 Peachtree St.","BuildingID":"B630012","Address":"34 Peachtree St.","City":"Jonesboro","District":"Central","Location":"B630012 34 Peachtree Street","State":"GA","StreetName":"34 Peachtree St.","Zip":"30303","X":2228810.0213674,"Y":1365970.5523757},.....
答案 0 :(得分：0)
stateck()中：您创建了一个JSON.parse来获取JSON对象但是你做了split？httpxml.responseText的样子吗？使用jQuery，您的函数getRecs()将是：
function getRecs() {
$.get( "getCategory.php", function( data ) {
// I don't know your JSON Structure, but here you could make someting like:
$.each(data, function(_key, _value) {
var opt = $("<option/>");
opt.attr("text", _value.text);
opt.attr("value", _value.value);
$("select").append(opt);
});
}, "json" );
}