如何获取下拉框选中值并存入数据库？JS功能失效求助

数据老陈

2026-6-26

问题与解决方案

问题描述

通过HTML+PHP实现了学生院校评价录入表格，从SQLite数据库拉取学生信息，为每位学生配置BTS、IUT、Licence、CPGE、Ecole五种院校类型的下拉评价选择框，但JavaScript功能失效，同时不知道如何将选中的评价保存回数据库。

原始代码

HTML表格代码

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>BTS</th>
        <th>IUT</th>
        <th>Licence</th>
        <th>CPGE</th>
        <th>Ecole</th>
    </tr>
<!-- PHP CODE TO FETCH DATA FROM ROWS -->
<?php 
// LOOP TILL END OF DATA
while($rows=$result->fetchArray(SQLITE3_ASSOC))
{
?>
    <tr>
        <!-- FETCHING DATA FROM EACH
            ROW OF EVERY COLUMN -->
        <td><?php echo $rows['NOM'];?></td>
        <td><?php echo $rows['PRENOM'];?></td>
        <td><select name="Avis" id="avis_BTS" onchange="change()">
            <option value="">Avis</option>
            <option value="TF">Très Favorable</option>
            <option value="F">Favorable</option>
            <option value="R">Réservé</option>
            <option value="D">Défavorable</option>
            </select>
        </td>
        <td><select name="Avis" id="avis_IUT" onchange="change()">>
            <option value="">Avis</option>
            <option value="TF">Très Favorable</option>
            <option value="F">Favorable</option>
            <option value="R">Réservé</option>
            <option value="D">Défavorable</option>
            </select>
        </td>
        <td><select name="Avis" id="avis_Licence" onchange="change()">>
            <option value="">Avis</option>
            <option value="TF">Très Favorable</option>
            <option value="F">Favorable</option>
            <option value="R">Réservé</option>
            <option value="D">Défavorable</option>
            </select>
        </td>
        <td><select name="Avis" id="avis_CPGE" onchange="change()">>
            <option value="">Avis</option>
            <option value="TF">Très Favorable</option>
            <option value="F">Favorable</option>
            <option value="R">Réservé</option>
            <option value="D">Défavorable</option>
            </select>
        </td>
        <td><select name="Avis" id="avis_Ecole" onchange="change()">>
            <option value="">Avis</option>
            <option value="TF">Très Favorable</option>
            <option value="F">Favorable</option>
            <option value="R">Réservé</option>
            <option value="D">Défavorable</option>
            </select>
        </td>
    </tr>
<?php
    }
?>
</table>

JS引入与代码

HTML引入：

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="script.js"></script>
    <title>Avis Terminales</title>

JS文件：

// Initialisation des variables
var avis = "";

// fonction pour bien montrer visuellement au professeur que e choix a été validé
function change() 
{
    if(document.getElementsByID("avis_BTS").value != ""){
        document.getElementById("avis_BTS").style.backgroundColor = "green";
    }
}

// Pour récuperer les avis et les mettres dans une variable pour chaque élève
function save() 
{
    //var avis_bts = document.getElementById("avis_BTS").value;
    // document.write(avis_bts);
    //document.write(5+6);

    let selection = document.getElementById('avis_BTS');
    if(selection.selectedIndex == 1){
        a = "Très Favorable";
    }
    else if(selection.selectedIndex == 2){
        a = "Favorable";
    }
    else{
        a = "Avis";
    }

    document.getElementById('reponse2').innerHTML = "hello";
}

解决方案

一、修复JavaScript功能问题

1. 修正DOM API调用错误

change函数中使用了错误的document.getElementsByID，正确API为document.getElementById（无末尾的s）。

2. 让`change`函数适配所有下拉框

当前change仅处理BTS下拉框，修改为接收触发事件的元素，实现复用：

修改HTML中所有select的onchange属性为：onchange="change(this)"
更新JS的change函数：

function change(selectElement) {
    // 选中有效值时背景设为绿色，否则恢复默认
    selectElement.style.backgroundColor = selectElement.value !== "" ? "green" : "";
}

3. 修复HTML语法错误

多个select标签的onchange后多了多余的>，比如<select name="Avis" id="avis_IUT" onchange="change()">>，需删除多余的>，避免DOM解析异常。

4. 解决JS加载时机问题

将script标签移至</body>前，或用DOMContentLoaded包裹JS代码，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    // 原JS代码放在这里，或确保相关操作在DOM就绪后执行
});

5. 完善`save`函数

变量a未声明，需添加let或var
确保页面存在id="reponse2"的元素，否则会报错
循环生成的下拉框id重复，需改为通过name区分（见下文数据库保存部分）

二、实现评价保存到数据库

1. 修正表单元素命名规则

所有select的name重复且无法区分学生和院校类型，需改为带学生ID和院校类型的格式（假设学生表有唯一ID字段）：

<!-- 示例：BTS下拉框的name格式 -->
<select name="avis[<?php echo $rows['ID']; ?>][BTS]" onchange="change(this)">

2. 数据保存实现（两种方式）

方式一：表单提交刷新页面

将表格包裹在<form>中，添加提交按钮：

<form method="POST" action="save_avis.php">
    <!-- 你的表格代码 -->
    <button type="submit">保存所有评价</button>
</form>

创建save_avis.php处理提交数据：

<?php
// 连接SQLite数据库
$db = new SQLite3('your_database.db');

// 遍历提交的评价数据
if(isset($_POST['avis'])) {
    foreach($_POST['avis'] as $studentId => $avisData) {
        foreach($avisData as $type => $value) {
            // 跳过空评价
            if(empty($value)) continue;
            
            // 检查该学生该类型的评价是否已存在
            $checkStmt = $db->prepare("SELECT id FROM student_avis WHERE student_id = :sid AND type = :type");
            $checkStmt->bindValue(':sid', $studentId, SQLITE3_INTEGER);
            $checkStmt->bindValue(':type', $type, SQLITE3_TEXT);
            $checkResult = $checkStmt->execute();
            
            if($checkResult->fetchArray()) {
                // 更新已有评价
                $updateStmt = $db->prepare("UPDATE student_avis SET avis = :avis WHERE student_id = :sid AND type = :type");
                $updateStmt->bindValue(':avis', $value, SQLITE3_TEXT);
                $updateStmt->bindValue(':sid', $studentId, SQLITE3_INTEGER);
                $updateStmt->bindValue(':type', $type, SQLITE3_TEXT);
                $updateStmt->execute();
            } else {
                // 插入新评价
                $insertStmt = $db->prepare("INSERT INTO student_avis (student_id, type, avis) VALUES (:sid, :type, :avis)");
                $insertStmt->bindValue(':sid', $studentId, SQLITE3_INTEGER);
                $insertStmt->bindValue(':type', $type, SQLITE3_TEXT);
                $insertStmt->bindValue(':avis', $value, SQLITE3_TEXT);
                $insertStmt->execute();
            }
        }
    }
}

// 跳转回原页面并提示成功
header("Location: your_page.php?status=success");
exit;
?>

方式二：AJAX异步保存（无刷新）

修改save函数实现异步提交：

function save() {
    let formData = new FormData();
    // 收集所有下拉框的评价数据
    document.querySelectorAll('select[name^="avis["]').forEach(select => {
        let match = select.name.match(/avis\[(\d+)\]\[(\w+)\]/);
        if(match) {
            let studentId = match[1];
            let type = match[2];
            formData.append(`avis[${studentId}][${type}]`, select.value);
        }
    });

    // 发送AJAX请求
    fetch('save_avis.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.text())
    .then(() => {
        document.getElementById('reponse2').innerHTML = "评价保存成功！";
    })
    .catch(err => {
        document.getElementById('reponse2').innerHTML = "保存失败：" + err.message;
    });
}

后端save_avis.php代码与表单提交版本一致。

3. 回显已有评价

生成下拉框时，从数据库读取学生已有的评价并设置默认选中：

<?php
// 在学生循环内，先获取该学生的已有评价
$studentId = $rows['ID'];
$avisStmt = $db->prepare("SELECT type, avis FROM student_avis WHERE student_id = :sid");
$avisStmt->bindValue(':sid', $studentId, SQLITE3_INTEGER);
$avisResult = $avisStmt->execute();
$studentAvis = [];
while($row = $avisResult->fetchArray(SQLITE3_ASSOC)) {
    $studentAvis[$row['type']] = $row['avis'];
}
?>

<!-- 示例：BTS下拉框生成代码 -->
<td>
    <select name="avis[<?php echo $studentId; ?>][BTS]" onchange="change(this)">
        <option value="" <?php echo empty($studentAvis['BTS']) ? 'selected' : ''; ?>>Avis</option>
        <option value="TF" <?php echo ($studentAvis['BTS'] === 'TF') ? 'selected' : ''; ?>>Très Favorable</option>
        <option value="F" <?php echo ($studentAvis['BTS'] === 'F') ? 'selected' : ''; ?>>Favorable</option>
        <option value="R" <?php echo ($studentAvis['BTS'] === 'R') ? 'selected' : ''; ?>>Réservé</option>
        <option value="D" <?php echo ($studentAvis['BTS'] === 'D') ? 'selected' : ''; ?>>Défavorable</option>
    </select>
</td>

内容的提问来源于stack exchange，提问作者moise_don't know