我该怎么办？如果我在第一个下拉手部水疗中心选择，手部按摩应该只出现在第二个下拉列表中。
我希望第二个下拉列表中的值取决于第一个 这是我目前的代码：
<body>
<form method='index.php' action='post'>
Category: <select id="id" name="category">
<?php
$qry=mysql_query("SELECT * FROM categ",$con);
while($rs = mysql_fetch_object($qry)){
echo "<option id='".$rs->categid."'>" .$rs->categname."</option>";
}
?>
</select>
<br>
sub categ: <select id="id" name="subcategory">
<?php
$qry=mysql_query("SELECT * FROM serv",$con);
while($rs = mysql_fetch_object($qry)){
echo "<option id='".$rs->servid."'>" .$rs->servname."</option>";
}
?>
</select>
</form>
</body>
这是我的数据库
CREATE TABLE IF NOT EXISTS `categ` (
`categid` int(11) NOT NULL AUTO_INCREMENT,
`categname` varchar(255) NOT NULL,
PRIMARY KEY (`categid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `categ`
--
INSERT INTO `categ` (`categid`, `categname`) VALUES
(1, 'hand spa'),
(2, 'foot spa');
CREATE TABLE IF NOT EXISTS `serv` (
`servid` int(11) NOT NULL AUTO_INCREMENT,
`servname` varchar(255) NOT NULL,
`categid` int(11) NOT NULL,
PRIMARY KEY (`servid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `serv`
--
INSERT INTO `serv` (`servid`, `servname`, `categid`) VALUES
(1, 'haaaanndddd massage', 1),
(2, 'footssppaa', 2);
答案 0 :(得分：1)
以下是一个示例，您可以自定义以执行所需操作。从本质上讲，您可以使用jQuery / AJAX来实现此目的。
下面的示例创建了第二个下拉框，其中填充了找到的值。如果你逐行遵循逻辑，你会发现它实际上非常简单。我留下了几条注释掉的行，如果取消注释（一次一个），将显示脚本在每个阶段的行为。
文件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>
FILE 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;
回答常见问题：“如何使第二个下拉框填充仅与第一个下拉框中所选选项相关的字段？”
一个。在第一个下拉列表的.change事件中，您可以读取第一个下拉框的值：
$('#dropdown_id').change(function() {
var dd1 = $('#dropdown_id').val();
}
B中。在上面的.change()事件的AJAX代码中，您将该变量包含在要发送到第二个.PHP文件的数据中（在我们的例子中，“another_php_file.php”）
℃。您在mysql查询中使用该传入变量，从而限制了您的结果。然后将这些结果传递回AJAX函数，您可以在AJAX函数的success:部分访问它们
d。在该成功函数中，您使用修订的SELECT值将代码注入DOM。
以上示例的工作原理如下：
用户选择一个学生名称，该名称会触发jQuery .change()选择器
以下是抓取用户选择的选项的行：
var sel_stud = $(this).val();
此值通过此AJAX代码行发送到another_php_file.php：
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;
我们在AJAX <SELECT>中可以使用收到的数据（自定义的success: function() {//code block}代码块），我可以在这里将它注入DOM：
$('#LaDIV').html(whatigot);
瞧，您现在看到第二个下拉控件，使用第一个下拉控件中的选项特定值进行自定义。
像非Microsoft浏览器一样工作。
答案 1 :(得分：0)
如果我清楚地提出了您的问题，您可以研究此代码并根据您的需求进行自定义。 简单直接：
我们的目的是管理电影
<label>Movie Category</label>
<select name="movieCategory" id="movieCategory">
<option value="">--- S e l e c t ---</option>
<?php
$movieCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
reset($movieCategory);
while (list($key , $value) = each($movieCategory)) {
echo " <option id='".$value."' value='".$value."'>".$value."</option>";
}
?>
</select>
<br>
<label>Movie SubCategory</label>
<select name="subCategory" id="subCategory">
<option value="">--- S e l e c t ---</option>
<?php
$subCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
reset($subCategory);
while (list($key , $subvalue) = each($subCategory)) {
echo " <option id='".$subvalue."' value='".$subvalue."'>".$subvalue."</option>";
}
?>
</select>
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script language="javascript" type="text/javascript">
$(function () {
$('select#movieCategory').change(function(){
$('select#subCategory option#'+$(this).val()).attr( "selected" , "selected" )
});
});
</script>