dynamic下拉框？
我得到了一个名为category的数据库表，如下所示：
我正在尝试做一个dynamic下拉框和索引脚本显示为：
<?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来完成这个。
我更新了我的示例代码，以匹配您的服务器login/表/字段名称，所以如果你复制/粘贴这两个例子到文件（称为tester.php和another_php_file.php ），那么你应该有一个充分的工作示例来玩。
我修改了下面的示例来创build第二个下拉框，填充所find的值。 如果你按照逻辑行，你会发现它实际上很简单。 我留下了几条注释，如果不注释（一次一个），会告诉你脚本在每个阶段都在做什么。
文件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代码中，你将这个variables包含在你发送给第二个.PHP文件的数据中（在我们的例子中是“another_php_file.php”）
C.你在mysql查询中使用传入的variables，从而限制你的结果。 然后将这些结果传递回AJAX函数，您可以在AJAX函数的success:部分访问它们
D.在那个成功函数中，你用修改后的SELECT值向DOM中注入代码。
这就是我在上面的示例中所做的：
-
用户select一个学生名称，它激发了jQuery
.change()select器 -
下面是抓取用户select的选项的行：
var sel_stud = $(this).val(); -
这个值通过AJAX代码的这一行发送到
another_php_file.php：data: 'theOption=' + sel_stud, -
接收文件
another_php_file.php在这里接收用户的select：$selStudent = $_POST['theOption']; -
Var $ selStudent（通过AJAX发布的用户select）用于mysqlsearch：
$ query =“SELECT * FROM`category` WHERE`master` = 0 AND`name` ='$ selStudent'”;
（当改变例子以适合你的数据库时，对$ selStudent的引用被删除，但是这个（这里，上面）是你将如何使用它的）。
-
我们现在构build一个新的
<SELECT>代码块，将HTML存储在名为$r的variables中。 当HTML完全构build完成后，我只需将定制代码返回给AJAX例程即可：echo $r; -
接收到的数据（自定义的
<SELECT>代码块）在AJAX中可用success: function() {//code block}，我可以将它注入到DOM中：$('#LaDIV').html(whatigot);
瞧，你现在可以看到第二个下拉控件，这个控件按照第一个下拉控件的选项来定制。
像非微软浏览器一样工作。
