使用innerHTML+=向<select>添加<option>无效问题排查

核心问题 #

你的代码存在两个关键错误，导致课程无法正常显示：

1. PHP中$courses数组未初始化：循环填充课程对象前未声明$courses = [];，会触发PHP未定义变量警告，最终json_encode的结果可能异常或为空。
2. JS与PHP的Course类参数顺序不匹配：
   • PHP构造函数参数顺序：name, id, term, credits
   • JS构造函数参数顺序：name, id, credits, term
     这会导致JSON序列化后，JS中课程对象的term和credits值完全颠倒，筛选条件courses[i].term == term永远无法匹配，自然不会添加任何选项。

修正步骤 #

1. 修复PHP代码

• 提前初始化$courses数组
• 添加JSON_UNESCAPED_UNICODE确保中文课程名正常显示

// 先初始化数组
$courses = [];

class Course{
    public $name;
    public $id;
    public $term;
    public $credits;

    function __construct($name,$id,$term,$credits){
        $this->name = $name;
        $this->id = $id;
        $this->term = $term;
        $this->credits = $credits;
    }
    function getName() {
        return $this->name;
    }
    function getId() {
        return $this->id;
    }
    function getTerm() {
        return $this->term;
    }
    function getCredits() {
        return $this->credits;
    }
}

try {
    $db = new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $query = "SELECT * FROM course";
    $statement = $db->query($query);
    $results = $statement->fetchAll(PDO::FETCH_ASSOC);

    foreach ($results as $row) {
        $courseName = $row['courseName'];
        $courseId = $row['courseId'];
        $courseCredits = $row['courseCredits'];
        $courseTerm = $row['courseTerm'];

        $course = new Course($courseName,$courseId,$courseTerm,$courseCredits);
        array_push($courses,$course);
    }
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

// 避免中文转义，保证JSON可读性
$jsonArray = json_encode($courses, JSON_UNESCAPED_UNICODE);

2. 修复JS代码

• 调整Course构造函数参数顺序与PHP保持一致；或直接省略JS的Course类（JSON序列化后的对象会自动转为JS普通对象，无需手动构造）
• 推荐使用更可靠的DOM方法添加选项

// 直接使用PHP序列化后的对象，无需重复定义Course类
let courses = <?php echo $jsonArray; ?>;

function displayClasses(){
    console.log("displayClasses()");
    let term = document.getElementById("term").value;
    let output = document.getElementById("className");

    // 清空现有选项
    output.innerHTML = "";
    
    for (let i = 0; i < courses.length; i++) {
        if (courses[i].term == term) {
            // 方法2：DOM方式更可靠
            let opt = document.createElement('option');
            opt.text = courses[i].name;
            opt.value = courses[i].name;
            output.options.add(opt);
            
            // 方法1修正后也可使用：
            // output.innerHTML += `<option value="${courses[i].name}">${courses[i].name}</option>`;
        }
    }
}

验证建议 #

• 在JS中执行console.log(courses)，确认每个课程对象的term值是否与select的value（如term1/term2）匹配
• 查看PHP页面源代码，确认<?php echo $jsonArray; ?>输出的是结构正确的JSON数组

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