[英]PHP/MySQL change one drop down menu on the selection of another
我希望第二个下拉列表出现在第一个下拉列表中(2个选择的链)。 如果有人可以指导我或给我插图,该怎么办,我将不胜感激!
首先下拉:
<select name="customer">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($cust = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
</select>
第二个下拉列表:
<select name="product">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY product ORDER BY product";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($row = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
</select>
<select name="customer" onchange="this.form.submit()">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($cust = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
</select>
<?php if(isset($_REQUEST['customer'])){ ?>
<select name="product">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($row = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
</select>
<?php } ?>
您可以在第二个下拉菜单中添加一个where条件,查询将是,
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";
组合代码:
<form name="demo" action="#">
<select name="customer" onchange="this.form.submit()">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($cust = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
</select>
<?php if(isset($_REQUEST['customer'])){ ?>
<select name="product">
<option value="">--</option>
<?php
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($row = mysql_fetch_assoc($sql_result)) {
echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
</select>
<?php } ?>
</form>
将第二个下拉列表设置为禁用页面加载:
<select name="product" style="display:none;" id="product">
.........
</select>
和第一个下拉菜单的onchange
事件编写以下函数:
<select name="customer" onchange="showdrop()" id="customer">
.....
</select>
将以下代码用于jquery函数以显示第二个下拉列表:
<script>
function showdrop()
{
var customer=$("#customer").val(); // get the value of currently selected customer
$.ajax({
type:"post",
dataType:"text",
data:"customer="+customer,
url:"products.php", // page to which the ajax request is passed
success:function(response)
{
$("#product").html(response); // set the result to product dropdown
$("#product").show();
}
})
}
</script>
并创建一个php文件products.php并编写查询以获取与客户相对应的产品(可以根据您的情况进行更改),然后从那里返回下拉列表。
<?php
$customer=$_POST['customer'];
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." where customer='$customer'";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($row = mysql_fetch_assoc($sql_result))
{
echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>";
}
exit;
?>
尝试这个:
$("#customer").change(function(){
$("#product").show();
});
或将选项动态添加到第二个
$("#customer").change(function(){
//get dynamically option for product by ajax or array
var customer = $("#product");
$('<option>', {
value: "example",
text: "example"
}).appendTo(customer);
});
如果要使用纯JavaScript,可以使用以下方法。
除了其他jquery答案之外,您还需要检查客户是否不空,因为您需要隐藏product元素,以防用户再次选择空选项。
更新您的select元素以调用javascript函数。
<select name="customer" id="customer" onchange="showProducts()"></select>
隐藏默认情况下选择的产品。
<select name="product" id="product" style="display: none">
创建javascript函数。
<script>
function showProducts() {
var customer = document.getElementById('customer').options[e.selectedIndex].value;
var product = document.getElementById('product');
if (customer != '')
product.style.display = 'block';
else
product.style.display = 'none';
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.