Javascript 如何让依赖的dropdownlist工作？
我有2个php文件。其中一个名为getCategory.php。此文件用于查询sql server数据库以获取所有类别 另一个名为getSubCategory.php 这将查询数据库以选择与类别关联的所有子类别 categoryId是两者之间的关系键 然后我有一个包含2个下拉列表的文件 其中一个id=cat_id，第二个下拉列表的id为sub_cat 我们的要求是您从“类别”下拉列表中选择一个选项，第二个下拉列表“子类别”下拉列表将根据您从“类别”下拉列表中的选择填充值 我曾经成功地用asp.net和classic asp 我不知道如何让它与php一起工作 对我来说尤其困难的是，类别和子类别位于两个单独的文件中，如上所述 以下是我迄今为止所做的工作，但需要您的专家帮助，才能使其以正确的方式工作 事先多谢Javascript 如何让依赖的dropdownlist工作？,javascript,php,ajax,json,Javascript,Php,Ajax,Json,我有2个php文件。其中一个名为getCategory.php。此文件用于查询sql server数据库以获取所有类别 另一个名为getSubCategory.php 这将查询数据库以选择与类别关联的所有子类别 categoryId是两者之间的关系键 然后我有一个包含2个下拉列表的文件 其中一个id=cat_id，第二个下拉列表的id为sub_cat 我们的要求是您从“类别”下拉列表中选择一个选项，第二个下拉列表“子类别”下拉列表将根据您从“类别”下拉列表中的选择填充值 我曾经成功地用asp.n
<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>
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" );
}
你们写的东西有什么问题？@Barmar，两个问题。第一，类别下拉列表没有填充。第二，我想获得子类别的url，就像我对类别所做的那样。这是类别：var url=http://servername/path/getCategory.php; 但我甚至不确定我做得是否正确，这也许可以解释为什么它没有填充下拉列表。非常感谢先生的回复。getRecs应该调用getSubCategory.php，而不是getCategory.php。您应该从window.onload函数调用getCategory.php。@Barmar，您能帮先生处理window.onload位吗？其中getCats是一个类似于getRecs的函数，但是通过调用getCategory.php来填充cat_id。谢谢您的回复。如果我能理解，您的jQuery可能会更好。您可以演示如何使用它不仅填充类别下拉列表，而且填充子类别吗？$get向给定的1发出HTTP get请求。参数url，如果此调用完成，则返回函数2。正在使用数据变量中的响应文本调用参数。三。参数json意味着，数据中的响应不是文本，而是json对象。因此，用getSubCategory.php替换getCategory.php并更改$select.appendopt；至$selectcat.appendopt；和$selectsubcat.appendopt；其中selectcat和selectsubcat是html select的id。
[{"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},.....
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" );
}