这是一个可以完成您想要的操作的示例。本质上,您可以使用 jQuery / AJAX 来完成此任务。
我更新了示例代码以匹配您的服务器登录/表/字段名称,因此如果您将这两个示例复制/粘贴到文件中(将它们称为tester.php
and another_php_file.php
)那么你应该有一个完整的工作示例可以使用。
我修改了下面的示例以创建第二个下拉框,其中填充了找到的值。如果你逐行遵循逻辑,你会发现它实际上非常简单。我留下了几行注释,如果未注释(一次注释),将向您显示脚本在每个阶段正在做什么。
文件 1 -- 测试仪.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. 在上述 AJAX 代码中.change()
事件中,您将该变量包含在发送到第二个 .PHP 文件的数据中(在我们的示例中为“another_php_file.php”)
C. 您在 mysql 查询中使用该传入变量,从而限制了您的结果。然后这些结果被传回 AJAX 函数,您可以在success:
AJAX 功能的一部分
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);
瞧,您现在看到第二个下拉控件,它使用特定于第一个下拉控件中的选择的值进行自定义。
与非 Microsoft 浏览器类似。