您需要进行一些重新配置以适应您的表数据和输出偏好，但这是我的服务器/数据库上的一种工作方法...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<?php
if(!$con=mysqli_connect("host","user","pass","db")){
echo "Failed to connect to MySQL: ",mysqli_connect_error();
}else{
$include_empty_teams_query="SELECT T.id AS `Tid`,T.name AS `Tname`,P.id AS `Pid`,P.name AS `Pname` FROM Teams T LEFT JOIN Players P ON T.id=P.teamid GROUP BY T.id,P.id HAVING P.id IS NOT NULL ORDER BY T.name,P.name;";
$exclude_empty_teams_query="SELECT T.id AS `Tid`,T.name AS `Tname`,P.id AS `Pid`,P.name AS `Pname` FROM Teams T LEFT JOIN Players P ON T.id=P.teamid GROUP BY T.id,P.id HAVING P.id IS NOT NULL ORDER BY T.name,P.name;";
if($result=mysqli_query($con,$include_empty_teams_query)){
if(mysqli_num_rows($result)){
$select1="<select name=\"team\"><option value=\"0\">All</option>";
$select2="<select name=\"player\"></select>";
$last_team=NULL;
while($row=mysqli_fetch_assoc($result)){
$data[]=$row;
if($row["Tname"]!=$last_team){
if($row["Pid"]===NULL){
$select1.="<option disabled>{$row["Tname"]}</option>";
}else{
$select1.="<option value=\"{$row["Tid"]}\">{$row["Tname"]}</option>";
}
}
$last_team=$row["Tname"];
}
$select1.="</select>";
echo $select1," ",$select2;
mysqli_free_result($result);
}else{
echo "Query Logic Error";
}
}else{
echo "Query Syntax Error: ",mysqli_error($con);
}
}
?>
</body>
<script>
var json=<?=json_encode($data)?>; // cache for future referencing
$('[name="team"]').on('change',function(e){
var selVal=$(this).find(":selected").val();
if($(this).val()!=0){ // filter json
var newOptions=$(json).filter(function(i,sub){return sub.Tid==selVal});
}else{
var newOptions=json;
}
var $select2=$('[name="player"]');
$select2.empty(); // remove old options
$.each(newOptions,function(i,sub){
$select2.append($("<option></option>").attr("value",sub.Pid).text(sub.Pname));
});
}).change(); // trigger change() onload
</script>
</html>
渲染输出（[default/onload] 和 [Pearl Jam selected]）：
和
输出源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<select name="team"><option value="0">All</option><option value="2">49'ers</option><option value="3">Pearl Jam</option><option value="5">Trump</option><option value="1">Yankees</option></select> <select name="player"></select></body>
<script>
var json=[{"Tid":"2","Tname":"49'ers","Pid":"4","Pname":"Jerry Rice"},{"Tid":"2","Tname":"49'ers","Pid":"3","Pname":"Joe Montana"},{"Tid":"3","Tname":"Pearl Jam","Pid":"5","Pname":"Eddie Vedder"},{"Tid":"3","Tname":"Pearl Jam","Pid":"6","Pname":"Jeff Ament"},{"Tid":"3","Tname":"Pearl Jam","Pid":"9","Pname":"Matt Cameron"},{"Tid":"3","Tname":"Pearl Jam","Pid":"8","Pname":"Mike McCready"},{"Tid":"3","Tname":"Pearl Jam","Pid":"7","Pname":"Stone Gossard"},{"Tid":"5","Tname":"Trump","Pid":"10","Pname":"Donald Trump"},{"Tid":"1","Tname":"Yankees","Pid":"2","Pname":"Babe Ruth"},{"Tid":"1","Tname":"Yankees","Pid":"1","Pname":"Mickey Mantle"}]; // cache for future referencing
$('[name="team"]').on('change',function(e){
var selVal=$(this).find(":selected").val();
if($(this).val()!=0){ // filter json
var newOptions=$(json).filter(function(i,sub){return sub.Tid==selVal});
}else{
var newOptions=json;
}
var $select2=$('[name="player"]');
$select2.empty(); // remove old options
$.each(newOptions,function(i,sub){
$select2.append($("<option></option>").attr("value",sub.Pid).text(sub.Pname));
});
}).change();
</script>
</html>
我的代码的优点是：
- 没有 ajax 调用。这意味着用户的多次团队更改不会导致不必要的服务器负载。对数据库进行一次查询，所有数据都存储在一个 javascript 变量中。
- 我删除了旧的
mysql_ 函数，并实现了 mysqli_ 函数以使您的流程现代化。
- 我已经声明了两个单独的查询，但在我的帖子中只使用了一个。这使您可以决定是否希望在您的第一个下拉列表中包含没有球员的球队。
- 我使用
mysqli_fetch_assoc() 而不是mysqli_fetch_array()，因为我不使用它提供的数字键。
- 如果您包括没有球员的球队，球队名称将显示，但带有
disabled 属性，因此无法选择 - 这是故意的 UX 功能。
- 我使用
<?= 和?> 作为在$data 上的json_encode() 周围回显这个php 值 的简写。
- 我在 jquery onchange 函数的末尾使用
.change()，以便在页面加载时触发该函数。
使用的数据库表：
CREATE TABLE `Teams` (
`id` int(10) NOT NULL,
`name` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `Teams` (`id`, `name`) VALUES
(1, 'Yankees'),
(2, '49\'ers'),
(3, 'Pearl Jam'),
(4, 'Empty Team'),
(5, 'Trump');
ALTER TABLE `Teams`
ADD PRIMARY KEY (`id`);
ALTER TABLE `Teams`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
CREATE TABLE `Players` (
`id` int(10) NOT NULL,
`name` varchar(100) NOT NULL,
`teamid` int(10) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `Players` (`id`, `name`, `teamid`) VALUES
(1, 'Mickey Mantle', 1),
(2, 'Babe Ruth', 1),
(3, 'Joe Montana', 2),
(4, 'Jerry Rice', 2),
(5, 'Eddie Vedder', 3),
(6, 'Jeff Ament', 3),
(7, 'Stone Gossard', 3),
(8, 'Mike McCready', 3),
(9, 'Matt Cameron', 3),
(10, 'Donald Trump', 5);
ALTER TABLE `Players`
ADD PRIMARY KEY (`id`);
ALTER TABLE `Players`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;