当表单提交时如何触发onChange事件？

Question

我正在尝试使用PHP，JS和jQuery从CSV文件中通过筛选（两个下拉菜单）填充HTML表格。当用户打开页面时，用户将看到以下下拉菜单，这些下拉菜单的选项是目录中的文件名。

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

当用户提交以下表单时，PHP代码将被执行。

<?php
if(isset($_POST['choosefile']) && !empty($_POST['choosefile'])) {
    $t = $_POST["choosefile"];
    $filepath = "uploads/$t";
    $row = 0;
    $the_big_array = [];
    $unique_start_date = [];
    $unique_ids = array();
    if (($h = fopen("{$filepath}", "r")) !== false) {
        while (($data = fgetcsv($h, 1000, ",")) !== false) {
            $the_big_array[] = $data;
            $unique_ids[] = $data[0];
            $a unique_start_date[] = $data[1];
        }
        fclose($h);
    }


//closing bracket for parent if statement is at the end of the file
?>

以下两个下拉列表充当过滤器。

    <select name="" id="session_id">
        <option value="">[Select Session]</option>
    </select>
    <select name="" id="start_date">
        <option value="">[Select Start Date]</option>
    </select>

    <table border="1" class="table" id="personDataTable">
        <thead>
            <tr>
                <th scope="col">Session</th>
                <th scope="col">Start Date</th>

            </tr>
        </thead>
        <tbody id='tbody'>
        </tbody>
    </table>

    <script>
    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)); ?>;

    var table = document.getElementById("personDataTable").getElementsByTagName("tbody")[0];
    var temp,temp1 = {};
    var row = 0;

    $("#choosefile, #session_id, #start_date").on('change', function() {
        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 && row > -1) continue;
                if (d2 && obj1[i][1] !== d2 && row > -1) continue;
                row++;
                newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
                newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
                }
   });



</script>

<?php }?>

我遇到的问题是当用户提交第一个下拉框（包含文件名选项）时，表格不会生成或者它没有调用相应的.on('change', function()，在这个函数下面是表格生成的代码。

我无法触发第一个下拉框的.on('change', function()，但是当用户点击筛选下拉框时，那部分代码可以正常工作。

- JKLM

---

当您提交第一个下拉菜单时，页面会重新加载，因此此后不会触发onChange事件。一种可能的解决方法是在页面加载时填充表格。_或者_您可以切换到第一个下拉菜单的ajax解决方案（我的建议）。 - Jeff

那么除了使用Ajax，没有其他方法可以触发该事件吗？ - JKLM

一个可能的解决方法是在页面加载时填充表格（=触发该事件）。 - Jeff

如何在页面加载时填充表格？ - JKLM

将您在“on'change'”中作为回调的内容放入一个命名函数中并调用它。 - Jeff

Answer 1

这个回答是对我的最后一条评论的延伸，举个例子。"Original Answer"翻译成"最初的回答"。

//Put it into a seperate named function:
function fillTable() {
    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 && row > -1) continue;
         if (d2 && obj1[i][1] !== d2 && row > -1) continue;
         row++;
         newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
         newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
    }
}

                                             // reference to that function here
$("#choosefile, #session_id, #start_date").on('change', fillTable);

// call when the page is loading:
fillTable();

- Jeff