动态下拉框？
Posted
技术标签:
【中文标题】动态下拉框？【英文标题】：dynamic drop down box? 【发布时间】：2013-05-31 05:13:46 【问题描述】：我得到了一个名为 category 的数据库表，如图所示：
我正在尝试做一个动态下拉框，索引脚本显示为：
<?php
try
$objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `category`
WHERE `master` = 0";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
catch(PDOException $e)
echo 'There was a problem';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dependable dropdown menu</title>
<meta name="description" content="Dependable dropdown menu" />
<meta name="keywords" content="Dependable dropdown menu" />
<link href="/css/core.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/js/core.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<form action="" method="post">
<select name="gender" id="gender" class="update">
<option value="">Select one</option>
<?php if (!empty($list)) ?>
<?php foreach($list as $row) ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php ?>
<?php ?>
</select>
<select name="category" id="category" class="update"
disabled="disabled">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update"
disabled="disabled">
<option value="">----</option>
</select>
</form>
</div>
</body>
</html>
update.php 显示为：
<?php
if (!empty($_GET['id']) && !empty($_GET['value']))
$id = $_GET['id'];
$value = $_GET['value'];
try
$objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `category`
WHERE `master` = ?";
$statement = $objDb->prepare($sql);
$statement->execute(array($value));
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
if (!empty($list))
$out = array('<option value="">Select one</option>');
foreach($list as $row)
$out[] = '<option
value="'.$row['id'].'">'.$row['name'].'</option>';
echo json_encode(array('error' => false, 'list' => implode('',
$out)));
else
echo json_encode(array('error' => true));
catch(PDOException $e)
echo json_encode(array('error' => true));
else
echo json_encode(array('error' => true));
第二个下拉框没有显示依赖于第一个下拉框的值，如图所示：
谁能帮帮我。
【问题讨论】：
我不明白你在做什么！只需将相关代码发布为呈现的客户端，而不是 php 服务器端代码。顺便说一句，您只使用一张桌子吗？这样做的目的？ 当第一个下拉框被选中时，第二个下拉框应该显示套头衫和衬衫。例如，无论您选择哪个，如果我现在选择跳线，则第三个下拉菜单应显示黑色。 我在youtube.com/watch?v=ClRZzquik1c这个教程中得到了这个 您的表单似乎没有被提交。<select name="gender" id="gender" class="update" onchange="this.form.submit()"> 可能会有所帮助，但很难理解所有事情的进展情况。
@munue 您无需提交表单即可填充这些下拉框。您希望根据前一个下拉列表的选择来填充每个下拉列表，对吗？如果是这样，您应该改用 jQuery AJAX。下面的示例有很多代码，但是如果您仔细阅读它，您会发现它完全符合您的要求。您将需要使用 jQuery 将第二个和第三个下拉框替换为新代码（您可以在 AJAX success: function() blah blah blah 代码中执行此操作）。此外，您需要有两个$.ajax() 代码块，一个用于下拉列表#1，另一个用于下拉列表#2。
【参考方案1】：
这是一个可以做你想做的事的例子。本质上，您可以使用 jQuery / AJAX 来完成此操作。
我更新了我的示例代码以匹配您的服务器登录名/表/字段名称，因此如果您将这两个示例复制/粘贴到文件中（称它们为 tester.php 和 another_php_file.php），那么您应该有一个完整的工作示例一起玩。
我修改了下面的示例以创建第二个下拉框，其中填充了找到的值。如果您逐行遵循逻辑，您会发现它实际上非常简单。我留下了几行注释，如果未注释（一次一个），将向您展示脚本在每个阶段所做的事情。
文件 1 -- TESTER.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function()
//alert('Document is ready');
$('#stSelect').change(function()
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax(
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot)
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function()
alert('You clicked the button');
);
//END success fn
); //END $.ajax
); //END dropdown change event
); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
文件 2 - another_php_file.php
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT * FROM `category` WHERE `master` = 0";
$result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<select>
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0)
while ($row = mysql_fetch_assoc($result))
$r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
else
$r = '<p>No student by that name on staff</p>';
//Add this extra button for fun
$r = $r . '</select><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
要在评论中回答您的问题：“如何使第二个下拉框填充仅与第一个下拉框中的选定选项相关的字段？”
A.在第一个下拉列表的 .change 事件中，您读取了第一个下拉框的值：
$('#dropdown_id').change(function()
var dd1 = $('#dropdown_id').val();
B.在上述.change() 事件的 AJAX 代码中，将该变量包含在发送到第二个 .PHP 文件（在我们的例子中为“another_php_file.php”）的数据中
C.您在 mysql 查询中使用该传入变量，从而限制您的结果。然后将这些结果传递回 AJAX 函数，您可以在 AJAX 函数的success: 部分访问它们
D.在该成功函数中，您使用修改后的 SELECT 值将代码注入 DOM。
这就是我在上面发布的示例中所做的：
用户选择一个学生姓名，这会触发 jQuery .change() 选择器
这是它获取用户选择的选项的行：
var sel_stud = $(this).val();
这个值被发送到another_php_file.php，通过这行AJAX代码：
data: 'theOption=' + sel_stud,
接收文件another_php_file.php在这里接收用户的选择：
$selStudent = $_POST['theOption'];
var $selStudent（通过 AJAX 发布的用户选择）用于 mysql 搜索：
$query = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";
（在更改示例以适合您的数据库时，删除了对 $selStudent 的引用。但这（此处，上方）是您将如何使用它）。
我们现在构建一个新的 <SELECT> 代码块，将 HTML 存储在一个名为 $r 的变量中。当 HTML 完全构建完成后，我将自定义代码返回给 AJAX 例程，只需将其回显即可：
echo $r;
接收到的数据（自定义的<SELECT> 代码块）在AJAX success: function() //code block 中可供我们使用，我可以在这里将其注入到DOM 中：
$('#LaDIV').html(whatigot);
瞧，您现在看到了第二个下拉控件，该控件使用特定于第一个下拉控件中的选项的值进行自定义。
像非微软浏览器一样工作。
【讨论】：
@胡言乱语。您如何使第二个下拉框填充仅与第一个下拉框中的选定选项相关的字段？例如如果您从第一个下拉列表中选择 Jon Doe，则只有男性应该填充在第二个下拉列表中。或者，如果您选择 Mike Williams，那么女性应该填充在第二个下拉列表中 感谢大家的帮助，但我设法解决了我的问题。基本上我没有在 core.js 文件中指定 update.php 的路径以上是关于动态下拉框？的主要内容，如果未能解决你的问题，请参考以下文章