带有 2 个下拉菜单的 Ajax答案

【问题标题】：Ajax with 2 drop down menus带有 2 个下拉菜单的 Ajax
【发布时间】：2011-10-09 08:01:43
【问题描述】：

我有 2 个下拉菜单。在用户从每个选项中选择一个选项后，我希望 AJAX 生成一个答案。我可以使用此处找到的示例只需一个下拉菜单即可完成此操作：

http://www.w3schools.com/php/php_ajax_database.asp

我遵循了一些建议来尝试修改 2 个下拉菜单的脚本，但是我没有成功。数据似乎没有发布到 getuser.php 页面。

我的HTML代码页如下：

<?php
  require('includes/application_top.php');
?>

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showUser(current_size, current_shoe)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe);
xmlhttp.send();
}
</script>
</head>
<body>

   <?php
    $query = "SELECT products_name, products_shoe_size FROM products_description WHERE language_id = 1 and products_shoe_size != '' ";
    // Execute it, or return the error message if there's a problem.
    $result = mysql_query($query) or die(mysql_error());

    ?>

   <form> 
        <?php

        $dropdown = "<select name='current_shoe' id='current_shoe'><option value=''>Select the model of your current shoes:</option>";
    while($row = mysql_fetch_assoc($result)) {
      $dropdown .= "\r\n<option value='{$row['products_shoe_size']}'>{$row['products_name']}</option>";
    }
    $dropdown .= "\r\n</select>";
    echo $dropdown;

    ?>

 <select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)">
<option value="">Select the size of your current shoes:</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
<option value="10.5">10.5</option>
<option value="11">11</option>
<option value="11.5">11.5</option>
<option value="12">12</option>
<option value="12.5">12.5</option>
<option value="13">13</option>
</select>

</form>

<br />
<div id="txtHint"><b>Sizing info will be listed here.</b></div>

</body>
</html> 
  <?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

我猜问题可以在以下代码行之一中找到：

function showUser(current_size, current_shoe)

xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe);

 <select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)">

如果有人知道我做错了什么，我将永远感激不尽。我的头发快用完了。

【问题讨论】：

不是 if (str == "") { 每次调用 showUser 时都会返回吗？从不执行其余代码？
我知道这条评论并没有回答你的问题，但你可以通过使用像 jQuery 这样的 javascript 库为自己节省大量时间。

标签： php javascript ajax

【解决方案1】：

首先，当您在更改事件处理程序中调用showUser 函数时，您需要使用document.getElementById，而不是Document.getElementById（注意小写的d - JavaScript 中的变量区分大小写）。

其次，str 是在哪里定义的？在showUser 函数中，您检查它是否为空字符串，但如果未定义，则会抛出ReferenceError。

除此之外，您似乎从未删除 xmlhttp 变量，因此它会泄漏到全局范围内，这是不好的做法。您应该在其作用域的顶部使用 var 关键字声明每个变量。

【讨论】：

感谢您的提示。我改成了小写，去掉了这段代码：
感谢您的提示。我已从“D”更改为“d”并摆脱了空 str 检查（这是我正在使用的示例中的剩余代码），但问题仍然存在。选择第二个下拉菜单似乎没有任何作用。