【问题标题】:Unable to populate chained dropdown list with Ajax and Javascript无法使用 Ajax 和 Javascript 填充链式下拉列表
【发布时间】:2013-07-19 17:53:21
【问题描述】:

我是 Ajax 和一般编程新手,目前我正在学习中。

我的目标

我目前正在尝试创建一个链式下拉列表,其中第一个下拉列表从我的数据库中自行填充,第二个下拉列表根据用户在第一个下拉列表中的选择自行填充。

我的代码(表单页面)

<?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>

我的代码(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>";
    }
  }
?>

我的代码(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>";
    }
  }
?>

错误(或者说没有错误)

我的 Category 和 SubCategory 下拉列表都是空的,什么都没有显示,而且我看不出它到底是什么 WTF 是我做错了。谁能指出我的错误并告诉我如何纠正和改进?我一直在看屏幕 2 个小时而不是我没有更接近找出我的错误,因为我什么都没有得到(没有错误消息),只是一个带有 2 个下拉框的表格,完全是空的.

谢谢!

PS:我的最终目标是创建一种类似于在线商店中使用的表单,用户可以在其中上传商品以及随附的图片。我还没有添加表单的其余部分,因为我的保管箱无法正常工作,所以没有任何意义。

编辑:向表单页面添加了一个以前缺少的表格。结果没有可见的变化,我仍然无法使代码正常工作。

编辑 2:在代码中添加了各种警报。只有警报 5,6 和 7 正在工作并在我加载页面时弹出。javascript 中的警报不起作用,所以问题显然出在 javascript 函数中,虽然我仍然看不到错误是什么。

【问题讨论】:

  • 我使用 jQuery AJAX 很容易做到这一点。你考虑过吗?
  • 这里的问题是我才刚刚开始使用 Javascript,并且必须接触 jquery,因为我认为在继续之前至少掌握 javascript 和 AJAX 是个好主意到 jquery。
  • 这是有道理的。虽然我想说你现在可以独立学习 jQuery 和 javascript。看看这个教程:blueicestudios.com/chained-select-boxes-using-php-mysql-ajax 看看这是否是你正在尝试实现的东西。从头开始学习一些东西是个好主意,但这不是如今实现 javascript 功能的方式,因为像 jQuery 这样的 JS 库相当有效地处理了这部分。
  • 尝试一些警报,例如xmlhttp.readyState 为 4 之后
  • @ThomasLeu 我已经在代码中添加了一些警报,我已经编辑了我的帖子以包含结果。感谢您的输入!

标签: php javascript html mysql ajax


【解决方案1】:

我会推荐 2 处更改 -

1.在页面加载时加载您的类别选择选项,而不是使用onclick
- 将onload="getcategory()" 添加到您的身体标签。

2.在更改类别时加载您的子类别选择选项。
- 将onchange="getsubcategory(this)" 添加到您的&lt;select id="category"&gt;,并从您的&lt;select id="subcat" &gt; 中删除onclick="getsubcategory(cat)"
- 然后在你的getsubcategory() 中使用var catval = cat.options[cat.selectedIndex].value; 来获取选定的值。

现在看起来像 -

...
<!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>

【讨论】:

  • 有效!!我爱你。另一方面,在 标记中使用 onload 而不是在
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-08-26
  • 2013-09-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-08
相关资源
最近更新 更多