当使用AJAX获取PHP文件以从MySQL数据库检索数据时，下拉表格消失

Im using AJAX to make a php file get data from a MySQL database and populating it in a drop down depending on the users first choice drop down. Everything is working fine and the second drop down is populated correctly.

我使用AJAX制作一个php文件从MySQL数据库中获取数据,然后根据用户首选下拉列表将其填入下拉列表中。一切正常,第二次下拉正确填充。

The issue I am having is when selecting an option from the second drop down the whole second drop down just disappears on selection and I cant work out why.

我遇到的问题是当从第二次下拉选择一个选项时,整个第二次下拉只是在选择时消失,我无法找出原因。

The working example can be found HERE.

可以在这里找到工作示例。

The Markup

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

The PHP file - 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);
?>

Could anyone please help me to why it just disappears?

有人可以帮我解释为什么它会消失吗?

The end result that I need is the user selects a width, this then populates the second drop down with available lengths. From the the second drop down the user selects a length to purchase. So the whole second drop down I plan on being a form which sends the selection to PayPal or another merchant. If anyone knows a better way of doing this also please say.

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

1 个解决方案

#1

Your second Drop down has Value=""

你的第二次下拉有值=“”

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

When you select it, it calls the JS and execute this condition:

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

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

....

which overwrite the DIV with ID=txtHINT

用ID = txtHINT覆盖DIV

If you want to fix it: Make sure in this line

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

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

the value isn't empty, or change the JS.

该值不为空,或更改JS。

#1