动态下拉框？
我有一个名为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));
}
第二个下拉框未显示依赖于第一个下拉框的值,如下所示:
有谁可以帮助我吗.
这是一个可以做你想要的例子.基本上,您可以使用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函数,您可以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'];在$ mysql搜索中使用Var $ selStudent(通过AJAX发布的用户选择):
$ 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浏览器一样工作.
| 归档时间： |
|
| 查看次数： |
5135 次 |
| 最近记录： |