使用javascript和php从mysql的级联下拉列表 [英] cascading dropdowns from mysql with javascript and php
问题描述
编辑：第一个条目底部的解决方案。
我一直在淘汰一两天，现在没有任何运气让我的动态下降工作。
我有一个表单。第一个下拉菜单是客户领域。我想要的是在下拉菜单中选择客户时，在第二个下拉列表中选择与该客户相关联的条款。第二个下拉菜单总是有相同的选择，无论选择什么客户，其特定客户都选择了哪些选项。
这是什么它看起来像。
Dropdown1（客户）
---------
Acme Corp
Contoso Inc
史密斯维尔
Dropdown2（条款）
---------
NET15
NET30
NET45
我希望dropdown2更改为与该客户在mysql数据库中相关的条款。 p>
我无法确定我是否应该在表单本身中留下下拉列表选项，并使用javascript调用php文件来找出为该客户选择的 - 或 - 如果我应该简单地从表单中删除整个选项，并且像我在下面的工作中显示的javascript调用。
这是我在两个表单中的两个下拉菜单，第二个是来自javascript的div。
< td>< select name =companyonchange =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文件。这样做是为客户获得选项，并选择所选的选项。如果我在浏览器中直接运行，那么它可以正常工作，所以我知道php正在工作。
;？php
包含$ _SERVER ['DOCUMENT_ROOT']。/ connect.php;
$ result3 = mysql_query（SELECT * from netterms ORDER BY days ASC）或死（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']。 /选项>中;
}
？>
最后，这是我尝试javascript / jquery。
< script type =text / javascript>
函数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 =从我的php文件从xmlhttp.open如果你可以帮助我将是伟大的！谢谢。
解决：
经过几天的努力让这个工作，我偶然发现了一个解决方案在另一个网站。这是代码。这里重要的是仔细使用带有表标签的div标签。它就像这个作者代码下面没有显示的。
对于我来说，td标签必须在这里，而不在php。但是，我的选择标签是在php。我真的希望这对于某人进行搜索是有价值的。
< html>
< head>
< script>
function showUser（str）
{
if（str ==）
{
document.getElementById（txtHint）。innerHTML =;
return;
}
if（window.XMLHttpRequest）
{// IE7 +，Firefox，Chrome，Opera，Safari的代码
xmlhttp = new XMLHttpRequest（）;
}
else
{// 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 =usersonchange =showUser（this.value）>
< option value =>选择一个人：< / 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>此处将列出个人信息。< / b>< / div>
< / body>
< / html>
您应该可以使用Ajax加载PHP脚本时间第一次选择更改。
我尝试适应你的问题的答案，但我可以'真的测试一下：
$（＃company）live（'change'，function（）
{
var selectVal = $（'＃company：selected'）。val（）;
var $ terms = $（'＃terms'）。 ）;
$ .ajax（{
url：'customertermsdropdownquery.php'，
data：id =+ selectVal，
dataType：'GET'
success：function（data）
{
$ terms.append（data）;
}
}）;
}）;
EDIT: Solution at the bottom of this first entry.
I've been scouring SO for a good day or two now and am not having any luck coming up with getting my dynamic drop downs working.
I have a form. The first dropdown is the customer field. What I want is when the customer is selected in the drop down, the terms associated with that customer are selected in the second dropdown. The Second dropdown always has the same options no matter what customer is chosen, its a matter of which of those options are "selected" for that particular customer.
Here is what it looks like.
Dropdown1 (customer)
---------
Acme Corp
Contoso Inc
Smithville
Dropdown2 (terms)
---------
NET15
NET30
NET45
I want dropdown2 to change to the terms associated with that customer in the mysql database.
I can't figure out if I should leave the dropdown options in the form itself and use javascript to call a php file to find out which is selected for that customer -or- if I should simply remove the entire options selection from the form and have javascript call that like I show in my work below.
Here is what I in the form for my two dropdowns, the second is from javascript with div.
<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>
And here is my php file that is supposed to be called from javascript. What this does is get the options for the customer and selects the option that is selected. If I run this directly in the browser with ?id=acme corp it works fine so I know the php is working.
<?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>";
}
?>
And finally, here is my attempt at the 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>
What I am seeing is that everytime dropdown1 is changed, a new (additional) dropdown2 appears on the screen. I don't want multiple dropdowns appearing all over the page, just want the options in the dropdown to refresh. Also, I can't figure out how to pass ?id= to my php file from xmlhttp.open if you could help me out would be great! thanks.
SOLVED:
After several days of trying to get this to work, I stumbled upon a solution on another site. Here is the code. What is important here is the careful use of div tags with table tags. It goes like this which is not shown below in this authors code.
For me the td tags had to be here and not in the php. However, my select tags are in the php. I really hope this is of value to someone searching.
<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>
You should probably use Ajax to load the php script every time the first select changes.
Adapted from sending http request with ajax each time select box is changed :
I tried adapting the answer to your question but I can't really test it:
$("#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);
}
});
});
这篇关于使用javascript和php从mysql的级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
