你需要做一些重新配置，以滿足您的表數據，並輸出偏好，但這是我的服務器/數據庫工作方法......
<!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>
繪製輸出（[默認/ onload事件]和[珍珠果醬選擇）：
和
輸出源碼：
<!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這個PHP值的json_encode()左右。
- 我在我的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;
是羣體動態？它說'團隊'。是一個團隊嗎？你能夠使用JQuery嗎？ – Vbudo
Hi @Vbudo。團隊[我將它稱爲團隊]是一個表格，其中包含teamID和團隊。是的，我可以使用JQuery，但我仍然是綠色的。 – justinc