提交表单时触发onChange事件：CSV筛选表格生成异常

看起来你遇到的问题是表单提交后页面刷新，但表格没有自动渲染，必须手动操作筛选下拉框才会显示数据——这是因为你的JS代码只监听了下拉框的change事件，但页面加载完成（也就是表单提交后的新页面）并没有主动执行一次数据渲染的逻辑。下面给你几个可行的解决方案：

1. 封装筛选逻辑为独立函数，页面加载时自动调用 #

把原本写在change事件里的筛选代码抽成一个单独的函数，然后在页面加载完成时和下拉框变化时都调用它。这样表单提交后页面刷新，函数会自动执行，直接渲染出完整的表格（或者根据默认的空筛选值显示所有数据）。

修改后的JS代码如下：

<script>
// 保留从PHP传递的数据
var obj1 = <?php array_shift($the_big_array); echo json_encode($the_big_array); ?>;
var obj2 = <?php array_shift($unique_start_date); echo json_encode(array_unique($unique_start_date)); ?>;
var obj3 = <?php array_shift($unique_ids); echo json_encode(array_unique($unique_ids)); ?>;

// 封装筛选+渲染表格的核心函数
function renderTable() {
    var d1 = $("#session_id").val();
    var d2 = $("#start_date").val();
    $("#tbody").empty();
    
    for (var i = 0; i < obj1.length; i++) {
        // 筛选条件判断，空值时不做过滤
        if (d1 && obj1[i][0] !== d1) continue;
        if (d2 && obj1[i][1] !== d2) continue;
        
        // 创建新行并插入数据
        var newTr = document.createElement("tr");
        newTr.insertCell(-1).textContent = obj1[i][0];
        newTr.insertCell(-1).textContent = obj1[i][1];
        $("#tbody").append(newTr);
    }
}

$(document).ready(function() {
    // 补全：给两个筛选下拉框填充选项（你之前的代码遗漏了这一步）
    // 填充Session下拉框
    obj3.forEach(function(id) {
        $("#session_id").append(`<option value="${id}">${id}</option>`);
    });
    // 填充Start Date下拉框
    obj2.forEach(function(date) {
        $("#start_date").append(`<option value="${date}">${date}</option>`);
    });
    
    // 页面加载完成后自动调用渲染函数，显示所有数据
    renderTable();
    
    // 给下拉框绑定change事件，触发重新渲染
    $("#session_id, #start_date").on('change', renderTable);
});
</script>

备注：我帮你补全了筛选下拉框的选项填充逻辑——你之前的代码只定义了空的下拉框，但没有把PHP获取的unique_ids和unique_start_date填充进去，这也是影响功能的潜在问题。

2. 额外优化：避免表单提交刷新页面（可选） #

如果想提升用户体验，不想让页面刷新，可以把表单提交改成AJAX请求，这样无需刷新页面就能加载数据并渲染表格。调整后的代码结构如下：

修改文件选择下拉框（去掉表单提交） #

<select class="form-control col-sm-5" id="choosefile" name="choosefile">
    <option value="" selected>Choose Term</option>
    <?php foreach ($files as &$value) { 
        echo '<option value="' . $value . '">' . $value . '</option>'; 
    } ?>
</select>

新增AJAX处理的JS代码 #

<script>
// 初始化全局变量
var obj1 = [];
var obj2 = [];
var obj3 = [];

// 复用之前的渲染函数
function renderTable() {
    var d1 = $("#session_id").val();
    var d2 = $("#start_date").val();
    $("#tbody").empty();
    
    for (var i = 0; i < obj1.length; i++) {
        if (d1 && obj1[i][0] !== d1) continue;
        if (d2 && obj1[i][1] !== d2) continue;
        
        var newTr = document.createElement("tr");
        newTr.insertCell(-1).textContent = obj1[i][0];
        newTr.insertCell(-1).textContent = obj1[i][1];
        $("#tbody").append(newTr);
    }
}

// 文件选择下拉框的AJAX事件
$("#choosefile").on('change', function() {
    var fileName = $(this).val();
    if (!fileName) return;
    
    $.ajax({
        url: "csv-handler.php", // 新建一个PHP文件处理CSV读取
        method: "POST",
        data: { choosefile: fileName },
        success: function(response) {
            // 更新全局数据
            obj1 = response.data;
            obj2 = response.unique_dates;
            obj3 = response.unique_ids;
            
            // 重置并填充筛选下拉框
            $("#session_id").empty().append('<option value="">[Select Session]</option>');
            $("#start_date").empty().append('<option value="">[Select Start Date]</option>');
            obj3.forEach(id => $("#session_id").append(`<option value="${id}">${id}</option>`));
            obj2.forEach(date => $("#start_date").append(`<option value="${date}">${date}</option>`));
            
            // 渲染表格
            renderTable();
        }
    });
});

// 筛选下拉框的change事件
$("#session_id, #start_date").on('change', renderTable);
</script>

新建CSV处理PHP文件（csv-handler.php） #

<?php
if(isset($_POST['choosefile']) && !empty($_POST['choosefile'])) {
    $t = $_POST["choosefile"];
    $filepath = "uploads/$t";
    $the_big_array = [];
    $unique_start_date = [];
    $unique_ids = array();
    
    if (($h = fopen("{$filepath}", "r")) !== false) {
        fgetcsv($h); // 跳过表头行
        while (($data = fgetcsv($h, 1000, ",")) !== false) {
            $the_big_array[] = $data;
            $unique_ids[] = $data[0];
            $unique_start_date[] = $data[1];
        }
        fclose($h);
    }
    
    // 返回JSON格式数据
    echo json_encode([
        'data' => $the_big_array,
        'unique_ids' => array_unique($unique_ids),
        'unique_dates' => array_unique($unique_start_date)
    ]);
}
?>

为什么原来的代码不生效？ #

原来的JS代码只有在下拉框change事件触发时才会执行筛选渲染，但表单提交后页面是全新加载的，此时没有任何下拉框的change事件被触发，所以表格一直是空的。通过封装函数并在页面加载时主动调用，就能解决这个问题。

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