两个下拉列表，第二个下拉列表填充了数据库中的值
[英]Two drop down list, second one populated with values in database
问题描述
我需要做两个下拉列表。 假设第一个包含食品类别：冰淇淋，比萨饼，面条，奶昔。
因此，如果我选择冰淇淋，则第二个下拉列表将包含：巧克力，香草，薄荷等。 如果我在第一个选择披萨，我希望第二个可以动态更改，以便包含：意大利辣香肠，所有肉类，等等。
但是，我需要第二个下拉列表由数据库中已有的值填充。 因此，如果我没有巧克力冰淇淋，那么第二个下拉列表中就不会有巧克力了。 那是我想要的结果。
我正在使用HTML，PHP，JavaScript / jQuery和MySQL，因此当前它是一个webapp，这两个下拉列表供我从数据库中删除值。 假设我要从Pizzas中删除Pepperoni，我会在第一个下拉列表中选择Pizzas，然后在第二个下拉列表中选择Pepperoni。 然后，我将单击删除，该删除将执行js函数以使用ajax将参数传递给PHP，然后可以执行删除查询。
我一直在动态地填充第二个下拉列表，对此有什么帮助吗？ 到目前为止，我为下拉列表所做的只是：
<select id="tester_type">
<option value=""></option>
<option value="LMX">LMX</option>
<option value="LCX">LCX</option>
<option value="CAT">CAT</option>
<option value="J750">J750</option>
<option value="HPPS">HPPS</option>
<option value="HP93K">HP93K</option>
<option value="UFLEX">UFLEX</option>
<option value="IFLEX">IFLEX</option>
<option value="QRT">QUARTET</option>
<option value="TGR">TIGER</option>
<option value="ETS">ETS</option>
<option value="LEX">LEX</option>
<option value="HPLC">HPLC</option>
<option value="HPSS">HPSS</option>
</select>
</td>
</tr>
<tr>
<td>New Tester Name:</td>
<td>
<select id="tester_type">
<!--Update list of available testers-->
</select>
</td>
注意：我只是将第一个下拉列表替换为食物类别，以便更好地理解我的问题。 仅将第一个作为食物类别，将第二个作为其类型/风味。
编辑：
它不会在窗口的所需部分/格中显示任何内容。 除了我在HTML和其他两个按钮中添加的标题之外，其他内容均为空白。
根据布兰登的回答，我做了什么：
在HTML中：
<html>
<head>
<title>Delete Tester</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript">displayDropDown();</script>
</head>
<body>
<h3>Delete Tester</h3>
<div id="drop_two_list"></div>
<table class="deleteTable">
<tr>
<td/><td><br>
<input type="button" value="Cancel" onclick="window.close();"/>
<input type="button" name="send" value="Delete" onclick="deleteTester();"/>
</td>
</tr>
</table>
</body>
</html>
在外部javascript文件中：
function dislplayDropDown()
{
var page = "database.php";
$.post(page, {
action : "dislplayDropDown"
}, function(data) {
$("div#drop_two_list").html(data);
alert(data);
});
在PHP中：
function displayDropDown()
{
$tester_info = "dummy_tester_list";
$query_string = "select * from $tester_info";
$result = @mysql_query($query_string) or die (mysql_error());
$data = mysql_fetch_array($result) or die (mysql_error());
echo "<select id=\"tester_type\">";
while($data)
{
echo "<option value='$data['tester_type']'>$data['tester_type']</option>"; // first drop down
}
echo "</select>";
$selected_tester_type = $_REQUEST['tester_type'];
$query_string = "select * from $tester_info where tester_type = $selected_tester_type";
$result = @mysql_query($query_string) or die (mysql_error());
$data = mysql_fetch_array($result) or die (mysql_error());
echo "<select>";
while($data)
{
echo "option id=\"tester_name\" value='$data['tester_name']'>$data['tester_name']</option>"// second drop down
}
echo "</select>";
}
?>
<?php
$action = rtrim($_REQUEST['action']);
if($action=="insert")//This is for some other function
{
$tester_type = rtrim($_REQUEST['tester_type']);
$tester_name = rtrim($_REQUEST['tester_name']);
echo checkDuplicateTesterName($tester_type, $tester_name);
}
else if($action=="displayDropDown")
{
echo displayDropDown();
}
?>
这是Kentot要求的表结构，它只是前五行，因为有500多行，所以我不想将整个内容放在这里：
id tester_type tester_name
1 LMX LMX-01
2 LMX LMX-04
3 LMX LMX-05
4 LMX LMX-06
5 LMX LMX-07
3 个解决方案
解决方案1
1 2015-05-27 00:50:02
您可以创建此表，说我们将其称为“菜单”
food_id | food_type_flavor | food_category
--------------------------------------------
1 | chocolate | ice cream
2 | vanilla | ice cream
3 | lemon | juice
在您的代码中，您可以创建一个
$query = mysql_query("Select * from menu");
echo "<select name='food_category' >";
while($test = mysql_fetch_array($query))
{
echo "<option value='$test['food_category']'>$test['food_category']</option>"; // first drop down
}
echo "</select>";
然后，当您选择类别时，您可以获取选择的food_category，然后可以使用该变量进行第二次下拉
$selected_category = $_POST['food_category'];
$query = mysql_query("Select * from menu where food_category ='$selected_category'");
echo "<select>";
while($test = mysql_fetch_array($query))
{
echo "<option name='food_flavor_type' value='$test['food_type_flavor]' >$test['food_type_flavor']</option>"; // second drop down
}
echo"</select>";
解决方案2
1 2015-05-27 02:46:27
Hai hzq我已经对您的代码进行了修改，以便我更清楚地回答：
您的HTML：
<?php
$result = mysql_query("select * from dummy_tester_list");
$data = mysql_fetch_array($result);
?>
<select id="tester_type">
<?php foreach($data as $d): ?>
<option value="<?php echo $d["tester_type"]?>"><?php $d["tester_type"];?></option>
<?php endforeach ?>
</select>
<section id="tester_name">
</section>
<h3>Delete Tester</h3>
<table class="deleteTable">
<tr>
<td><div id="drop_two_list"></div></td>
</tr>
<tr>
<input type="button" value="Cancel" onclick="DELETE_TESTER_POPUP.close();"/>
<input type="button" name="send" value="Submit" onclick="deleteTester();"/>
</td>
</tr>
</table>
您想要获取所选测试器类型列表的PHP：
<?php
$tester_type = $_POST["tester_name"];
$query = mysql_query("select * from tester_info where tester_type = {$tester_type}");
$select_dropdown;
$select_dropdown .= "<select name='tester_lists'>";
while($row = mysql_fetch_array($query)){
$select_dropdown .= "<option>{$row["tester_name"]}</option>";
}
$select_dropdown .= "</select>";
echo $select_dropdown;
?>
当您更改测试人员姓名并获得等效的测试人员列表时，您的jquery
$("body").on("change","#tester_type",function(){
$.ajax({
url: "dropdowns.php", // your php file
type: "POST",
data: tester_name: $(this).val(),
success: function(data){
$("#tester_name").html(data);
}
});
});
解决方案3
0 2015-05-27 02:33:28
你可以试试这个..
<?php
function displayDropDown()
{
$tester_info = "dummy_tester_list";
$query_string = "select * from $tester_info";
$result = @mysql_query($query_string) or die (mysql_error());
$data = mysql_fetch_array($result) or die (mysql_error());
echo "<select id=\"tester_type\">";
while($data)
{
?>
<option><?php echo $data['tester_type']; ?></option>
<?php
}
echo "</select>";
$selected_tester_type = $_REQUEST['tester_type'];
$query_string = "select * from $tester_info where tester_type = $selected_tester_type";
$result = @mysql_query($query_string) or die (mysql_error());
$data = mysql_fetch_array($result) or die (mysql_error());
echo "<select>";
while($data)
{
?>
<option><?php echo $data['tester_name']; ?></option>
<?php
}
echo "</select>";
}
?>
<?php
$action = rtrim($_REQUEST['action']);
if($action=="insert")//This is for some other function
{
$tester_type = rtrim($_REQUEST['tester_type']);
$tester_name = rtrim($_REQUEST['tester_name']);
echo checkDuplicateTesterName($tester_type, $tester_name);
}
else if($action=="displayDropDown")
{
echo displayDropDown();
}
?>
因此我们将标签分开以消除错误
通过基于该选择在一个下拉列表中选择值，只有与该选择相关的值应该进入第二个下拉列表
[英]by selecting the values in one drop down list based on that selection only values related to that should get in second drop down list
下拉列表由数据库中的列表填充。 首先需要将默认值设置为文本
[英]Drop Down that gets populated by a list from the database. Need to Set a default value as text as first option
如何在我的 javascript 填充下拉列表中包含值以包含在价格计算器中？
[英]How can I include values in my javascript populated drop down list to include in a price calculator?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.