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()，但是当用户单击过滤器下拉菜单时，该部分效果很好

Answer 1

例如，这个答案是我最后一次评论的范围。

//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();

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

1 个答案: