【问题标题】:cascading dropdowns from mysql with javascript and php使用 javascript 和 php 从 mysql 级联下拉列表
【发布时间】:2013-04-05 11:52:55
【问题描述】:

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

我已经搜索了一两天了,但我没有任何运气来让我的动态下拉菜单正常工作。

我有一个表格。第一个下拉列表是客户字段。我想要的是在下拉列表中选择客户时,在第二个下拉列表中选择与该客户关联的条款。无论选择什么客户,第二个下拉菜单始终具有相同的选项,这取决于为该特定客户“选择”了哪些选项。

这是它的样子。

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>

这是我应该从 javascript 调用的 php 文件。这样做是为客户获取选项并选择已选择的选项。如果我直接在浏览器中使用 ?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 时,屏幕上都会出现一个新的(附加)dropdown2。我不希望在整个页面上出现多个下拉菜单,只想刷新下拉菜单中的选项。另外,我不知道如何将 ?id= 从 xmlhttp.open 传递给我的 php 文件,如果你能帮助我,那就太好了!谢谢。

已解决:

在尝试了几天后,我偶然发现了另一个网站上的解决方案。这是代码。这里重要的是谨慎使用 div 标签和 table 标签。它是这样的,这在此作者的代码中未在下面显示。

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

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

【问题讨论】:

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


    【解决方案1】:

    您可能应该在每次第一次选择更改时使用 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);
    
          } 
        });
    
    });
    

    【讨论】:

    • 我现在看看,我认为基本上不是使用 Ajax XMLHttpRequest 通过 .load() 加载 php 文件会更合适
    • 我也不确定 $("#company").val 是否会在实际提交之前返回任何内容...
    • 我看到了那个,但它缺少一些代码供我思考。您提到将 onclick 更改为 onchange。我将此添加到我的选择中,但没有执行
    • 我认为我的脚本没有触发 php,不知道如何/为什么。
    猜你喜欢
    • 2012-10-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多