蓝极冰焰 2024-04-17 00:21 采纳率: 44.4%
浏览 9
已结题

关于下拉菜单选项关联的问题

关于下拉菜单、数据库、关联选项的问题
更新了一下版本,代码要重新弄,请教大家!
需要达成的效果是:
1、数据库里有match_results表,有字段:game、year、match、mname、point字段;
2、game下拉菜单是从数据库里game字段中调取,选择相应的game后,会决定year的选项(也是从数据库里调取),选择year后,会影响match的选项,以此类推。
我现在这个代码,没有办法形成这种关联~麻烦大家帮我看下~~如何修改可好。
另外,我这个页面会放在主页的一个

标签中,如何可以做到不跳转、或重新加载的现象?可以使它连续显示?

<?php
// 数据库连接配置
$host = '127.0.0.1';
$dbname = 'games';
$user = 'root';
$password = '1111';

try {
    // 创建PDO实例
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $password, [
        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES   => false,
    ]);
} catch (PDOException $e) {
    die("数据库连接失败: " . $e->getMessage());
}
// 查询游戏列表
try {
    $stmt = $pdo->prepare('SELECT DISTINCT game FROM match_results ORDER BY game DESC');
    $stmt->execute();
    $gameList = $stmt->fetchAll(PDO::FETCH_COLUMN);
} catch (PDOException $e) {
    die("查询游戏列表失败: " . $e->getMessage());
}

// 查询其他列表
$gamelist = queryList('game', 'match_results');
$yearList = queryList('year', 'match_results');
$matchList = queryList('match', 'match_results');
$mnameList = queryList('mname', 'match_results');

// 辅助函数来查询不同的列表
function queryList($column, $table) {
    global $pdo;
    $list = [];
    try {
        $stmt = $pdo->prepare("SELECT DISTINCT `$column` FROM `$table` ORDER BY `$column` DESC");
        $stmt->execute();
        $list = $stmt->fetchAll(PDO::FETCH_COLUMN);
    } catch (PDOException $e) {
        die("查询$table$column失败: " . $e->getMessage());
    }
    return $list;
}

// 设置默认选中的值
$selectedGame = isset($_GET['game']) ? $_GET['game'] : '';
$selectedYear = isset($_GET['year']) ? $_GET['year'] : '';
$selectedMatch = isset($_GET['match']) ? $_GET['match'] : '';
$selectedMname = isset($_GET['mname']) ? $_GET['mname'] : '';

// 渲染HTML表单
?>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<title>Matches Selector</title>

<div class="container"><h1>团体积分 | Points List Of Delegations</h1></div>
<div class="container" style="border-radius: 15px; background-color: #595959";>

<form id="form" action="" method="get">
    <!-- 第1个下拉框 -->
    <select id="game-select" name="game" onchange="this.form.submit();">
        <option value="">请选择</option>
        <?php foreach ($gamelist as $game): ?>
            <option value="<?php echo htmlspecialchars($game); ?>" <?php echo $game === $selectedGame ? 'selected' : ''; ?>><?php echo htmlspecialchars($game); ?></option>
        <?php endforeach; ?>
    </select>

    <!-- 第2个下拉框 -->
    <select id="year-select" name="year" onchange="this.form.submit();">
        <option value="">请选择</option>
        <?php foreach ($yearList as $year): ?>
            <option value="<?php echo htmlspecialchars($year); ?>" <?php echo $year === $selectedYear ? 'selected' : ''; ?>><?php echo htmlspecialchars($year); ?></option>
        <?php endforeach; ?>
    </select>

    <!-- 第3个下拉框 -->
    <select id="match-select" name="match" onchange="this.form.submit();">
        <option value="">请选择</option>
        <?php foreach ($matchList as $match): ?>
            <option value="<?php echo htmlspecialchars($match); ?>" <?php echo $match === $selectedMatch ? 'selected' : ''; ?>><?php echo htmlspecialchars($match); ?></option>
        <?php endforeach; ?>
    </select>

    <!-- 第4个下拉框 -->
    <select id="mname-select" name="mname" onchange="this.form.submit();">
        <option value="">请选择</option>
        <?php foreach ($mnameList as $mname): ?>
            <option value="<?php echo htmlspecialchars($mname); ?>" <?php echo $mname === $selectedMname ? 'selected' : ''; ?>><?php echo htmlspecialchars($mname); ?></option>
        <?php endforeach; ?>
    </select>
</form>


</div>        
<!--选定之后,显示比赛信息区域 -->
    <p></p>
<?php
// 确保输入是安全的
$game = $_GET['game'] ?? '';
$year = $_GET['year'] ?? '';
$match = $_GET['match'] ?? '';
$mname = $_GET['mname'] ?? '';

// 使用预处理语句进行查询
$stmt = $pdo->prepare("SELECT delegation, SUM(point) AS points FROM match_results WHERE game = ? AND `year` = ? AND `match` = ? AND `mname` = ? GROUP BY delegation ORDER BY points DESC");
$stmt->execute([$game, $year, $match, $mname]);
$delegations = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<div name="div_main" class="container" style="border-radius: 20px; background-color:#F8F8F8;">
    <table class="table" style="font-family: inherit;">
        <tr align="center" style="font-weight:bold;">
            <td>序号</td>
            <td>代表队/Delegation</td>
            <td>积分/Points</td>
            <td>备注/Remark</td>
        </tr>
        <?php
        $serial_number = 1;
        foreach ($delegations as $row):
        ?>
            <tr align="center">
                <td><?php echo $serial_number; ?></td>
                <td><?php echo htmlspecialchars($row['delegation']); ?></td>
                <td><?php echo htmlspecialchars($row['points']); ?></td>
                <td></td>
            </tr>
            <?php
            $serial_number++;
        endforeach;
        ?>
    </table>
</div>
</body>
</html>


  • 写回答

12条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-17 00:21
    关注

    引自免费微信小程序:皆我百晓生

    为实现您所描述的下拉菜单选项关联效果,您需要动态地根据前一个下拉菜单的选择结果来更新后续下拉菜单的选项。目前的代码一次性获取了所有下拉菜单的所有选项,且没有实现选项之间的联动。针对您的需求,您可以采用JavaScript(这里使用jQuery简化操作)来处理下拉菜单的事件和动态加载选项。以下是修改后的代码,已将相关部分高亮注释:

    <?php
    // 数据库连接配置
    $host = '127.0.0.1';
    $dbname = 'games';
    $user = 'root';
    $password = '1111';
    
    try {
        // 创建PDO实例
        $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $password, [
            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES   => false,
        ]);
    } catch (PDOException $e) {
        die("数据库连接失败: " . $e->getMessage());
    }
    
    // 设置默认选中的值
    $selectedGame = isset($_GET['game']) ? $_GET['game'] : '';
    $selectedYear = isset($_GET['year']) ? $_GET['year'] : '';
    $selectedMatch = isset($_GET['match']) ? $_GET['match'] : '';
    $selectedMname = isset($_GET['mname']) ? $_GET['mname'] : '';
    
    // 渲染HTML表单
    ?>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
        <title>Matches Selector</title>
    
        <!-- Include jQuery library for AJAX and event handling -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function () {
                // Define a function to fetch options for a specific column based on the selected game
                function fetchOptions(column, selectedValue, targetSelectId) {
                    $.ajax({
                        url: 'fetch_options.php',
                        type: 'GET',
                        data: {game: selectedValue, column: column},
                        dataType: 'json',
                        success: function (data) {
                            var select = $('#' + targetSelectId);
                            select.empty().append('<option value="">请选择</option>');
                            $.each(data.options, function (index, option) {
                                select.append('<option value="' + option + '">' + option + '</option>');
                            });
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.error('Error fetching options:', textStatus, errorThrown);
                        }
                    });
                }
    
                // Event handler for game select change
                $('#game-select').on('change', function () {
                    var selectedGame = $(this).val();
                    fetchOptions('year', selectedGame, 'year-select');
                });
    
                // Event handler for year select change
                $('#year-select').on('change', function () {
                    var selectedGame = $('#game-select').val();
                    var selectedYear = $(this).val();
                    fetchOptions('match', selectedGame + ',' + selectedYear, 'match-select');
                });
    
                // Event handler for match select change
                $('#match-select').on('change', function () {
                    var selectedGame = $('#game-select').val();
                    var selectedYear = $('#year-select').val();
                    var selectedMatch = $(this).val();
                    fetchOptions('mname', selectedGame + ',' + selectedYear + ',' + selectedMatch, 'mname-select');
                });
            });
        </script>
    </head>
    <body>
    
    <div class="container"><h1>团体积分 | Points List Of Delegations</h1></div>
    <div class="container" style="border-radius: 15px; background-color: #595959">
    
    <form id="form" action="" method="get">
        <!-- 第1个下拉框 -->
        <select id="game-select" name="game">
            <option value="">请选择</option>
            <?php foreach ($gamelist as $game): ?>
                <option value="<?php echo htmlspecialchars($game); ?>" <?php echo $game === $selectedGame ? 'selected' : ''; ?>><?php echo htmlspecialchars($game); ?></option>
            <?php endforeach; ?>
        </select>
    
        <!-- 第2个下拉框 -->
        <select id="year-select" name="year">
            <option value="">请选择</option>
            <?php if (!empty($selectedGame)) { // Load initial year options if a game is already selected ?>
                <?php foreach ($yearList as $year): ?>
                    <option value="<?php echo htmlspecialchars($year); ?>" <?php echo $year === $selectedYear ? 'selected' : ''; ?>><?php echo htmlspecialchars($year); ?></option>
                <?php endforeach; ?>
            <?php } ?>
        </select>
    
        <!-- 第3个下拉框 -->
        <select id="match-select" name="match">
            <option value="">请选择</option>
            <?php if (!empty($selectedGame) && !empty($selectedYear)) { // Load initial match options if a game and year are already selected ?>
                <?php foreach ($matchList as $match): ?>
                    <option value="<?php echo htmlspecialchars($match); ?>" <?php echo $match === $selectedMatch ? 'selected' : ''; ?>><?php echo htmlspecialchars($match); ?></option>
                <?php endforeach; ?>
            <?php } ?>
        </select>
    
        <!-- 第4个下拉框 -->
        <select id="mname-select" name="mname">
            <option value="">请选择</option>
            <?php if (!empty($selectedGame) && !empty($selectedYear) && !empty($selectedMatch)) { // Load initial mname options if a game, year, and match are already selected ?>
                <?php foreach ($mnameList as $mname): ?>
                    <option value="<?php echo htmlspecialchars($mname); ?>" <?php echo $mname === $selectedMname ? 'selected' : ''; ?>><?php echo htmlspecialchars($mname); ?></option>
                <?php endforeach; ?>
            <?php } ?>
        </select>
    </form>
    
    </div>
    
    <!--选定之后,显示比赛信息区域 -->
    <p></p>
    
    <?php
    // 确保输入是安全的
    $game = $_GET['game'] ?? '';
    $year = $_GET['year'] ?? '';
    $match = $_GET['match'] ?? '';
    $mname = $_GET['mname'] ?? '';
    
    // 使用预处理语句进行查询
    $stmt = $pdo->prepare("SELECT delegation, SUM(point) AS points FROM match_results WHERE game = ? AND `year` = ? AND `match` = ? AND `mname` = ? GROUP BY delegation ORDER BY points DESC");
    $stmt->execute([$game, $year, $match, $mname]);
    $delegations = $stmt->fetchAll(PDO::FETCH_ASSOC);
    ?>
    
    <div name="div_main" class="container" style="border-radius: 20px; background-color:#F8F8F8;">
        <table class="table" style="font-family: inherit;">
            <tr align="center" style="font-weight:bold;">
                <td>序号</td>
                <td>代表队/Delegation</td>
                <td>积分/Points</td>
                <td>备注/Remark</td>
            </tr>
            <?php
            $serial_number = 1;
            foreach ($delegations as $row):
            ?>
                <tr align="center">
                    <td><?php echo $serial_number; ?></td>
                    <td><?php echo htmlspecialchars($row['delegation']); ?></td>
                    <td><?php echo htmlspecialchars($row['points']); ?></td>
                    <td></td>
                </tr>
                <?php
                $serial_number++;
            endforeach;
            ?>
        </table>
    </div>
    </body>
    </html>
    

    同时,创建一个新的PHP文件(例如:fetch_options.php),用于接收AJAX请求并返回指定列的选项数据:

    <?php
    require_once 'database_connection.php'; // Include your database connection file here
    
    $game = $_GET['game'];
    $column = $_GET['column'];
    
    if ($game == '') {
        exit(json_encode(['error' => 'Game must be selected']));
    }
    
    switch ($column) {
        case 'year':
            $stmt = $pdo->prepare("SELECT DISTINCT year FROM match_results WHERE game = ? ORDER BY year DESC");
            break;
        case 'match':
            list($game, $year) = explode(',', $game);
            $stmt = $pdo->prepare("SELECT DISTINCT match FROM match_results WHERE game = ? AND year = ? ORDER BY match DESC");
            break;
        case 'mname':
            list($game, $year, $match) = explode(',', $game);
            $stmt = $pdo->prepare("SELECT DISTINCT mname FROM match_results WHERE game = ? AND year = ? AND match = ? ORDER BY mname DESC");
            break;
        default:
            exit(json_encode(['error' => 'Invalid column']));
    }
    
    $stmt->execute([$game, $year, $match]);
    $options = $stmt->fetchAll(PDO::FETCH_COLUMN);
    
    echo json_encode(['options' => $options]);
    ?>
    

    这样,当用户在下拉菜单

    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月17日
  • 赞助了问题酬金15元 4月17日
  • 创建了问题 4月17日

悬赏问题

  • ¥15 linux驱动,linux应用,多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器,如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助