选择多个动态下拉框用每个选择下拉框过滤输出
select multiple dynamic drop box with the each select drop box filter the output
我想在页面上同时有三个左右的下拉框。
当我选择第一个下拉框时,它应该在表视图中显示数据库的内容。然后,当我选择第二个下拉框时,它应该过滤表格中的数据,并在3框中显示表格等。
我知道它可以在Ajax中完成,所以我在php中编写了一些代码。我做了代码,但有一个问题,第一个框工作正常,但当我选择第二个框时,我需要第一个框参数以及第二个被发送到第三个选择框。
可以请提供简单的代码,从数据库获取动态下拉框。我正在尝试这个代码为用户评论审查。
我已经使用了这个代码http://www.w3schools.com/PHP/php_ajax_database.asp
但是在我的情况下,所有内容都来自数据库,所选值应该过滤2选择框并显示表。然后,当选择3个选择框时,它显示取决于前两个选择框。
我正在尽我所能解释我想要什么。我想我已经很清楚我需要什么了。
寻求您的支持。代码在这里
<html>
<head>
<script type="text/javascript">
function showUserM(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();
}
function showUserI(str1,srt2)
{
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="+str1+"&i="+str2,true);
xmlhttp.send();
}
function showUserA(str1,str2,str3)
{
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="+str1+"&i="+str2+"&a="+str3,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
$server = 'localhost';
$user = 'root';
$pass = '';
$dbase = 'pub_12wing';
$connect = mysql_connect($server, $user, $pass, $dbase);
mysql_select_db("publisher",$connect);
/*这里有一些错误,在根据$sql_issue获取数据时应该依赖于$sql_magz所选择的查询,因此对于最后一个选择框需要改变的地方*/
$sql_magz = "select Distinct magz_id from magz_comment where pub_id = '2'";
$sql_issue = "select Distinct issue_id from magz_comment where pub_id = '2'";
$sql_artical = "select Distinct artical_id from magz_comment where pub_id = '2'";
$result_magz = mysql_query($sql_magz);
$result_issue = mysql_query($sql_issue);
$result_artical = mysql_query($sql_artical);
?>
<form>
<select name="mag_id" onChange="showUserM(document.getElementByID('mag_id').value)" id="mag_id">
<option value="" selected>Select a Magazine ID:</option>
<?php
while ($row =mysql_fetch_array($result_magz)){
echo "<option value=".$row['magz_id'].">{$row['magz_id']}</option>";
}
?>
</select>
<select name="issue_id" onchange="showUserI(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value)" id="issue_id">
<option value="" selected>Select a Issue ID:</option>
<?php
while ($row =mysql_fetch_array($result_issue)){
echo "<option value=".$row['issue_id'].">{$row['issue_id']}</option>";
}
?>
</select>
<select name="artical_id" onchange="showUserA(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value,document.getElementByID('artical_id').value)" id="artical_id">
<option value="" selected>Select a Artical ID:</option>
<?php
while ($row =mysql_fetch_array($result_artical)){
echo "<option value=".$row['artical_id'].">{$row['artical_id']}</option>";
}
?>
</select>
</form>
<br />
<div id="txtHint"><b>Magazine info will be listed here.</b></div>
<?php //mysql_close();?>
</body>
</html>
这个document.getElementByID('mag_id')。值或不需要更改的内容
第一个组合框有固定的值吗?如果是,则在文档中正常生成:
<select id="mag_id" onchange='PopulatesSecundBox(this)'>
<?php // prints database's data ?>
</select>
如果第二个和第三个组合是动态的,你可以这样做:
<select id="issue_id" onchange='PopulatesThirdBox(this)'>
<!-- Yes, it's empty -->
</select>
<select id="artical_id">
<!-- Yes, it's empty too -->
</select>
然后使用ajax处理事件中的db数据,并使用DOM与选项一起制作魔术…这是你需要的?
相关文章:
- Angular:使用选择列表选择过滤代码中的对象
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- gulpuncss正在过滤我的javascript所需的选择器
- 如何根据角度中的复选框选择过滤结果
- 仅当选择特定的选择选项时,才使用JavaScript过滤数组
- d3在鼠标悬停上过滤数据之后从选择中提取值
- 转换UL->li inot为同位素过滤菜单选择的列表
- 通过标签选择过滤平行网格
- 过滤具有2个选择列表的元素
- 如何使用jQuery过滤/克隆选择框选项
- Dojo Dgrid - 可以在过滤选择上编辑
- Jquery 从选择选择的插件过滤结果
- AngularJS在选择后过滤剩余的下拉选项
- 使用 jQuery 过滤选择框
- 如何使用jquery从数据表中单击按钮时选择过滤结果
- 按date_time开头的值选择/过滤JSON
- AngularJS通过下拉菜单中的选择过滤文本
- Mootools选择过滤
- 使用多表单选择过滤json对象
- 基于多个下拉选择(过滤)隐藏/显示行