无法填充链接的下拉列表，Ajax和JavaScript [英] Unable to populate chained dropdown list with Ajax and Javascript
问题描述
我是新来的Ajax，和一般的编程，和我目前在学习之中，我去。
I'm new to Ajax, and programming in general, and I am currently in the midst of learning as I go.
我的目标
目前我正在试图创建一个链接的下拉列表中的第一个下拉从我的数据库填充本身，第二个下拉列表填充本身的基础上，在第一个下拉用户的选择。
I am currently trying to create a chained dropdown list with the first dropdown populating itself from my database, and the second dropdown populating itself based on the user's selection in the first dropdown.
我的code（表页）
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
//Processing Code goes here
?>
<!DOCTYPE html>
<html>
<head>
<script>
function getcategory() {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
alert("This is an alert 1");
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
alert("This is an alert 2");
xmlhttp.open("GET","AddItemCat.php","true");
alert("This is an alert 3");
xmlhttp.send();
alert("This is an alert 4");
}
function getsubcategory(cat) {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("subcat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemSubCat.php?cat="+cat,"true");
xmlhttp.send();
}
</script>
</head>
<body>
<form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td>Select Category: </td>
<td><script>alert("This is an alert 5");</script>
<select id="category" onclick="getcategory()">
<script>alert("This is an alert 6");</script>
<option id="cat"value=""></option>
<script>alert("This is an alert 7");</script>
</select>
</td>
</tr>
<tr>
<td>Select SubCategory</td>
<td>
<select id="subcat" onclick="getsubcategory(cat)">
<option value=""></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
我的code（AddItemCat.php）
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") {
include("cxn.inc");
$userid=$_SESSION['UserId']
$branchid=0;
$getcat="SELECT * FROM `Categories` WHERE `Business`=$userid AND Branch=$branchid";
$runcat=mysqli_query($cxn,$getcat) or die (mysqli_error($cxn));
while($row=mysqli_fetch_assoc($runcat)) {
$cat=$row['Category'];
echo"<option value=$cat>$cat</option>";
}
}
?>
我的code（AddItemSubCat.php）
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") {
include("cxn.inc");
//Gets the category parameter passed from the URL
$cat=$_GET['cat'];
$userid=$_SESSION['UserId']
$branchid=0;
$getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat";
$runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn));
while($row=mysqli_fetch_assoc($runsub)) {
$sub=$row['Category'];
echo"<option value=$sub>$sub</option>";
}
}
?>
错误（或者说缺乏错误）
我的两个类别和子类别的下拉列表是空的，什么也没有显示出来，我看不出它是什么，究竟跆拳道这是我做了不少错事。任何人都可以亲切地指出我的错误，并告诉我如何纠正和改进？我一直在看屏幕2小时不，我没有接近搞清楚我的错误，因为我没有得到任何东西（没有错误消息），只是一个表用2个下拉框是完全空
Both my Category and SubCategory dropdown lists are empty and nothing is showing up, and I can't see what it is exactly WTF it is that I've done wrong. Could anyone kindly point out my errors and tell me how to correct them and improve? I've been looking at the screen for 2 hours not and i'm no closer to figuring out my error as i'm not getting ANYTHING at all( no error messages), just a table with the 2 dropdown boxes that are totally empty.
谢谢！
PS：我的最终目标是建立像在网上商店中使用，用户可以上传一个项目，连同随行的图片的形式。我还没有添加表格的其余部分，因为在它没有任何意义，因为我收存箱不工作。
PS: My ultimate aim is to create a form like the one used in online stores where the user can upload an item, together with accompanying pictures. I've yet to add the rest of the form as there is no point in it since my dropboxes are not working.
编辑：增加了一个表，表单页面不见了before.No可见变化的结果和我仍然无法获得code工作
Added a table to the form page that was missing before.No visible changes to the results and am still unable to get the code working.
编辑2：添加各种警报C $ c.Only警报5,6和7工作，蹦出来，当我加载的JavaScript的PAGE电泳警报不工作的$，所以这个问题显然在于内JavaScript函数，但我仍然无法看到的错误是什么。
EDIT 2:Added various alerts to the code.Only the alerts 5,6 and 7 are working and pop out when i load the page.The alerts in the javascript are not working, so the issue obviously lies within the javascript function, though i still cant see what the error is.
推荐答案
我会推荐2变化 -
I would recommend 2 changes -
1.Load您的等级在页面加载选择的选项，而不是使用的onclick 。
- 添加的onload =的getCategory（）你的身体标记。
1.Load your Category select options on page load, instead of using onclick.
-Add onload="getcategory()" to your body tag.
2.Load的子类别选择选项。
- 添加的onchange =getsubcategory（本）您＆LT;选择一个id =类别＆GT; ，和删除的onclick =getsubcategory（猫）从＆LT;选择一个id =subcat＆GT;
- 然后使用 VAR catval = cat.options [cat.selectedIndex] .value的; 在 getsubcategory（）来获得选定的值。
2.Load your SubCategory select options on change of Category.
-Add onchange="getsubcategory(this)" to your <select id="category">, and remove the onclick="getsubcategory(cat)" from your <select id="subcat" >
-Then use var catval = cat.options[cat.selectedIndex].value; in your getsubcategory() to get the selected value.
现在会是什么样子 -
It would now look like -
...
<!DOCTYPE html>
<html>
<head>
<script>
function getcategory() {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemCat.php","true");
xmlhttp.send();
}
function getsubcategory(cat) {
var xmlhttp;
var catval = cat.options[cat.selectedIndex].value;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("subcat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemSubCat.php?cat="+catval,"true");
xmlhttp.send();
}
</script>
</head>
<body onload="getcategory()">
<form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td>Select Category: </td>
<select id="category" onchange="getsubcategory(this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td>Select SubCategory</td>
<td>
<select id="subcat">
<option value=""></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
这篇关于无法填充链接的下拉列表，Ajax和JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
