如何点击HTML下拉项按钮并在JS事件中获取文本赋值给PHP变量

1. 修复HTML的重复ID问题 #

你循环生成的所有<a>标签都使用了同一个id="apply_list"，但HTML中ID必须唯一，这会导致点击事件只能绑定到第一个元素。把ID改为类名：

<li><a class="dropdown-item apply_list" role="button"><?php echo $mNames['mName']; ?></a></li>

2. 在JavaScript中获取点击元素的文本 #

修改JS代码，绑定点击事件到类选择器，通过$(this).text()获取当前点击项的文本：

$(document).ready(function(){
    $('.apply_list').click(function(){ 
        // 获取并清理文本（去除前后空格）
        const selectedName = $(this).text().trim();
        console.log(selectedName); // 可在控制台验证是否获取成功

        // 3. 将文本传递给PHP后端（通过AJAX）
        $.ajax({
            url: '你的后端处理文件.php', // 例如：handle_selection.php
            type: 'POST',
            data: { selectedName: selectedName },
            success: function(response) {
                // 后端处理完成后的回调，可根据返回值做后续操作
                console.log('数据已成功传递到PHP');
            },
            error: function(xhr, status, error) {
                console.error('数据传递失败:', error);
            }
        });
    });
});

3. 后端PHP接收并处理数据 #

创建一个PHP文件（比如handle_selection.php），接收前端传过来的文本，必须用预处理语句避免SQL注入：

<?php
// 数据库连接
$db = new PDO("mysql:dbname=db_project; host=localhost", "root", "");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['selectedName'])) {
    $selectedName = $_POST['selectedName'];

    // 示例：用预处理语句执行SQL查询
    $stmt = $db->prepare("SELECT * FROM `member` WHERE mName = :name");
    $stmt->bindParam(':name', $selectedName);
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // 可将处理结果返回给前端
    echo json_encode($result);
}
?>

关键提醒 #

• 绝对禁止直接拼接SQL：你原代码中直接把$_GET['cId']拼进SQL的写法存在严重的SQL注入漏洞，必须改用预处理语句。
• 前后端无法直接赋值：JavaScript运行在浏览器（前端），PHP运行在服务器（后端），只能通过HTTP请求（如AJAX）传递数据，不能直接把JS变量赋值给PHP变量。

内容的提问来源于stack exchange，提问作者YT Chen