蓝极冰焰 2024-04-17 14:42 采纳率: 37.5%
浏览 6
已结题

关于下拉菜单、数据库、关联选项的问题

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

3、我这个页面会放在主页的一个
标签中,如何可以做到不跳转、或重新加载的现象?可以使它连续显示?

<?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>
 


  • 写回答

26条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-17 14:42
    关注
    获得0.50元问题酬金

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

    为了实现您描述的联动下拉菜单效果,并且在不跳转或重新加载页面的情况下动态更新后续下拉菜单选项,您可以使用 AJAX 技术结合 JavaScript 进行前端交互。以下是对您现有代码的调整建议及补充的 JavaScript 部分:

    1. 移除表单提交事件:从每个 <select> 标签的 onchange 属性中移除 this.form.submit();,因为我们不再需要通过提交表单来刷新整个页面。

    2. 添加 JavaScript 文件:在 HTML 头部引入一个名为 script.js 的外部 JavaScript 文件,用于处理下拉菜单的联动逻辑。将以下内容保存到 script.js 文件中:

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('form');
        const gameSelect = document.getElementById('game-select');
        const yearSelect = document.getElementById('year-select');
        const matchSelect = document.getElementById('match-select');
        const mnameSelect = document.getElementById('mname-select');
    
        function updateOptions(targetSelect, url, selectedValue) {
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    targetSelect.innerHTML = '<option value="">请选择</option>';
                    data.forEach(option => {
                        const optionEl = document.createElement('option');
                        optionEl.value = option;
                        optionEl.textContent = option;
                        if (option === selectedValue) {
                            optionEl.selected = true;
                        }
                        targetSelect.appendChild(optionEl);
                    });
                })
                .catch(error => console.error('Error updating options:', error));
        }
    
        gameSelect.addEventListener('change', function () {
            const yearUrl = `fetch_options.php?column=year&game=${encodeURIComponent(this.value)}`;
            const matchUrl = `fetch_options.php?column=match&game=${encodeURIComponent(this.value)}`;
            const mnameUrl = `fetch_options.php?column=mname&game=${encodeURIComponent(this.value)}`;
    
            updateOptions(yearSelect, yearUrl, '');
            updateOptions(matchSelect, matchUrl, '');
            updateOptions(mnameSelect, mnameUrl, '');
        });
    
        yearSelect.addEventListener('change', function () {
            const matchUrl = `fetch_options.php?column=match&game=${encodeURIComponent(gameSelect.value)}&year=${encodeURIComponent(this.value)}`;
            const mnameUrl = `fetch_options.php?column=mname&game=${encodeURIComponent(gameSelect.value)}&year=${encodeURIComponent(this.value)}`;
    
            updateOptions(matchSelect, matchUrl, '');
            updateOptions(mnameSelect, mnameUrl, '');
        });
    
        matchSelect.addEventListener('change', function () {
            const mnameUrl = `fetch_options.php?column=mname&game=${encodeURIComponent(gameSelect.value)}&year=${encodeURIComponent(yearSelect.value)}&match=${encodeURIComponent(this.value)}`;
    
            updateOptions(mnameSelect, mnameUrl, '');
        });
    });
    
    1. 创建 fetch_options.php:这是一个辅助脚本,用于根据请求参数从数据库中获取相关选项并返回 JSON 格式数据。将以下内容保存为 fetch_options.php
    <?php
    // 数据库连接配置
    $host = '127.0.0.1';
    $dbname = 'games';
    $user = 'root';
    $password = '1111';
    
    try {
        $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) {
        http_response_code(500);
        die("数据库连接失败: " . $e->getMessage());
    }
    
    $column = $_GET['column'];
    $game = $_GET['game'] ?? null;
    $year = $_GET['year'] ?? null;
    $match = $_GET['match'] ?? null;
    
    switch ($column) {
        case 'year':
            $stmt = $pdo->prepare("SELECT DISTINCT `year` FROM `match_results` WHERE `game` = :game ORDER BY `year` DESC");
            $stmt->bindParam(':game', $game);
            break;
        case 'match':
            $stmt = $pdo->prepare("SELECT DISTINCT `match` FROM `match_results` WHERE `game` = :game AND `year` = :year ORDER BY `match` DESC");
            $stmt->bindParam(':game', $game);
            $stmt->bindParam(':year', $year);
            break;
        case 'mname':
            $stmt = $pdo->prepare("SELECT DISTINCT `mname` FROM `match_results` WHERE `game` = :game AND `year` = :year AND `match` = :match ORDER BY `mname` DESC");
            $stmt->bindParam(':game', $game);
            $stmt->bindParam(':year', $year);
            $stmt->bindParam(':match', $match);
            break;
        default:
            http_response_code(400);
            die("无效的列名: $column");
    }
    
    $stmt->execute();
    
    $options = $stmt->fetchAll(PDO::FETCH_COLUMN);
    
    header('Content-Type: application/json');
    echo json_encode($options);
    

    现在,当用户在下拉菜单中选择一个选项时,对应的后续下拉菜单将通过 AJAX 请求动态更新其选项,而无需刷新整个页面。同时,确保您的 HTML 页面头部已经包含对 jQuery 库的引用(如果您尚未使用),以便支持 AJAX 请求和事件处理:

    <head>
        ...
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js"></script>
    </head>
    

    这样,您应该已经实现了所需的功能,即根据前一个下拉菜单的选择动态更新后续下拉菜单的选项,并且在整个过程中保持页面无跳转和重新加载。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 4月25日
  • 创建了问题 4月17日

悬赏问题

  • ¥15 科来模拟ARP欺骗困惑求解
  • ¥100 iOS开发关于快捷指令截屏后如何将截屏(或从截屏中提取出的文本)回传给本应用并打开指定页面
  • ¥15 unity连接Sqlserver
  • ¥15 图中这种约束条件lingo该怎么表示出来
  • ¥15 VSCode里的Prettier如何实现等式赋值后的对齐效果?
  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)