Question

我一直在努力寻找类似的答案，但似乎我找不到类似的东西。

我在MySQL DB中有两个表。 User和Team。每个用户都在特定团队之下。

问题在于我想要填写两个下拉菜单＆＃39;名单。第一个下拉列表应该检索所有可用的团队。第二个下拉列表应根据用户在第一个下拉列表中选择的组填充数据。因此，例如，如果用户选择了团队A，则第二个下拉列表应填充在团队A下分配的用户。

$sql = "SELECT teamID FROM team";
$result = mysql_query($sql);

echo "<select name='team'>";
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='".$row['teamID']."'>".$row['teamID']."</option>";
    }
echo "</select>";

Answer 1

echo "<select name='team' id='firstSelect'>";
while ($row = mysql_fetch_array($result)) {
   echo "<option value='" . $row['teamID'] ."'>" . $row['teamID'] ."
                       </option>";
                        }
                        echo "</select>"; 
echo '<div id="secondSelect">new form or select will go here</div>';

Jquery

$('#firstSelect').on('change', function(){
  var teamId= $(this).val();
       $.post('yourPHPscript.php',
        { 
        'teamId' : teamId
        },
        function (response, status) {
            //response is the form or select generated from firstSelect
            document.getElementById('secondSelect').value= response;
            // or $('#secondSelect').html(response);
                            } );  // end post
 });  // end function

在yourPHPscript.php中获取变量并回显使用firstSelect数据的select（我建议使用一个表单）。当它被回应时，它将显示在第二个div中。我希望我没有做太多错别字。

Answer 2

您需要进行一些重新配置以适应您的表数据和输出首选项，但这是我服务器/数据库上的一种工作方法......

<!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功能。
我使用<?=和?>作为在json_encode() $data附近回复此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;

使用DB结果填充第一个dropmenu，并使用第一个dropmenu值填充第二个

2 个答案: