使用javascript和php从mysql级联下拉列表

时间:2013-04-12 20:11:31

标签: php javascript mysql forms drop-down-menu

编辑:第一个条目底部的解决方案。

我现在已经过了一两天了,而且我没有任何运气能让我的动态下降工作。

我有一张表格。第一个下拉列表是客户字段。我想要的是当在下拉列表中选择客户时,在第二个下拉列表中选择与该客户关联的条款。无论选择哪个客户,第二个下拉列表总是具有相同的选项,这些选项中的哪个选项被选中"对于那个特定的客户。

这就是它的样子。

Dropdown1 (customer)
---------
Acme Corp
Contoso Inc
Smithville

Dropdown2 (terms)
---------
NET15
NET30
NET45

我希望dropdown2更改为与mysql数据库中该客户关联的条款。

我无法弄清楚是否应该在表单中留下下拉选项并使用javascript调用php文件以找出为该客户选择的文件 - 或者 - 如果我应该只删除整个选项从表单中选择并进行javascript调用,就像我在下面的工作中显示的那样。

这是我在两个下拉列表中的形式,第二个是来自带有div的javascript。

<td><select name="company" onchange="getTerms('terms');">
<option value="" selected></option>
<?php while($row = mysql_fetch_array($result)) {
  echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>

<td><div id="terms"></div></td>

这是我的php文件应该从javascript调用。这样做是为客户获取选项并选择所选的选项。如果我直接在浏览器中使用?id = acme corp运行它,它运行正常,所以我知道php正在运行。

<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";


$result3 = mysql_query("SELECT * from netterms ORDER BY days ASC") or die(mysql_error());

$result = mysql_query("SELECT terms FROM customer WHERE company = '$_GET[id]'") or die(mysql_error());
$row = mysql_fetch_array($result);

echo "<option value=\"\" selected></option>";
while($row3 = mysql_fetch_array($result3)) {
  echo "<option value=\"".$row3['days']."\""; echo($row['terms'] == $row3['days']?' selected="selected"':null)?>><?php echo $row3['name']."</option>";

}
?>

最后,这是我对javascript / jquery的尝试。

<script type="text/javascript">
 function getTerms(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "<select name='terms'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "customertermsdropdownquery.php?id=", false);
 xmlhttp.send();
 }
 </script>

我所看到的是,每次dropdown1更改,屏幕上都会出现一个新的(附加)下拉列表2。我不希望在整个页面上出现多个下拉列表,只是希望下拉列表中的选项能够刷新。此外,我无法弄清楚如何通过xmlhttp.open将?id =传递给我的php文件,如果你可以帮助我的话会很棒!感谢。

解决:

经过几天试图让它发挥作用后,我偶然发现了另一个网站的解决方案。这是代码。这里重要的是仔细使用带有表标签的div标签。它是这样的,在下面的作者代码中没有显示。

对我来说,td标签必须在这里而不是在php中。但是,我的选择标签在php中。我真的希望这对搜索的人有价值。

<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="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html> 

1 个答案:

答案 0 :(得分:0)

每次第一次选择更改时,您应该使用Ajax加载php脚本。

改编自sending http request with ajax each time select box is changed

我尝试根据你的问题调整答案,但我无法真正测试它:

$("#company").live('change',function() 
{
    var selectVal = $('#company :selected').val();


    var $terms = $('#terms').html('');

    $.ajax({                                      
      url: 'customertermsdropdownquery.php',                         
      data: "id="+selectVal,                                                     
      dataType: 'GET',                
      success: function(data)         
      {

              $terms.append(data);

      } 
    });

});