使用 AJAX 获取 PHP 文件以从 MySQL db 检索数据时下拉表单消失答案

【问题标题】：Drop down form dissapearing when using AJAX to get PHP file to retrieve data from MySQL db使用 AJAX 获取 PHP 文件以从 MySQL db 检索数据时下拉表单消失
【发布时间】：2013-11-23 03:47:56
【问题描述】：

我使用 AJAX 使 php 文件从 MySQL 数据库中获取数据，并根据用户的首选下拉列表将其填充到下拉列表中。一切正常，第二个下拉列表正确填充。

我遇到的问题是从第二个下拉菜单中选择一个选项时，整个第二个下拉菜单在选择时消失了，我不知道为什么。

可以在HERE找到工作示例。

标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function showUser(str)
{
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?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="width" onchange="showUser(this.value)">
<option value="">Select a Width:</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<div id="txtHint">
    <form>
    <select name="length" onchange="showUser(this.value)">
    <option value="">Step 2</option>
    </select>
    </form>
</div>

</body>
</html>

PHP 文件 - getuser.php

<?php
$q = intval($_GET['q']);

$con = mysql_connect('cust-mysql-123-17','products','abc123','products');
if (!$con)
  {
  die('Could not connect: ' . mysql_error($con));
  }

mysql_select_db("products",$con);
$sql="SELECT * FROM deepblack WHERE width = '".$q."'";

$result = mysql_query($sql,$con);


echo "<form>
<select name=\"length\" onchange=\"showUser(this.value)\">
    <option value=\"\">Select a Length</option>";
    while($row = mysql_fetch_array($result))
        {
            echo "<option value=\"\">". $row['length'] ."</option>";
        }
echo"
    </select>
    </form>";

mysql_close($con);
?>

谁能帮我弄清楚它为什么会消失？

我需要的最终结果是用户选择一个宽度，然后用可用长度填充第二个下拉列表。从第二个下拉列表中，用户选择要购买的长度。因此，整个第二个下拉列表我计划成为一个将选择发送给 PayPal 或其他商家的表单。如果有人知道这样做的更好方法，也请说。

【问题讨论】：

标签： javascript php html mysql ajax

【解决方案1】：

你的第二个下拉菜单有Value=""

<select onchange="showUser(this.value)" name="length">
<option value="">Select a Length</option>
<option value="">5</option>
<option value="">10</option>
</select>

当你选择它时，它会调用JS并执行这个条件：

if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 

....

用ID=txtHINT覆盖DIV

如果你想修复它：确保在这一行

        echo "<option value=\"\">". $row['length'] ."</option>";

值不为空，或者换个JS。

【讨论】：

谢谢，我只需要去掉onchange和value属性？