Javascript / jQuery事件不适用于移动浏览器

Question

我有一个包含3个下拉菜单的表单，其中“章节”下拉列表的选项将根据用户选择的“成绩”下拉列表而更改。我使用 MYSQL 来查询我的section下拉列表所需的部分以及jQuery中的onChange事件来执行我想要的操作。在我的笔记本电脑的浏览器中，它运行正常，没有任何错误，但当我在移动浏览器上尝试它时，Android和iOS都没有用。

会发生什么：当我在下拉列表中选择任何等级时，所有章节将在章节下拉菜单中作为选项出现。

我想要发生的事情：当我在“成绩”下拉列表中选择“成绩12”选项时，“部分”下拉列表中的选项应该是包含gradelevel_id的部分。这仅适用于PC /笔记本电脑浏览器，而不适用于移动浏览器。

以下是表格：

<form class="form-horizontal" action="markAttendance.php" method="post">
                    <fieldset>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="gradelvl">Grade Level</label>
                            <div class="col-md-4">
                                <select id="gradelvl" name="glevel" class="form-control" required="">
                                      <option value=""></option>
                                      <option value="G1">Grade 1</option>
                                      <option value="G2">Grade 2</option>
                                      <option value="G3">Grade 3</option>
                                      <option value="G4">Grade 4</option>
                                      <option value="G5">Grade 5</option>
                                      <option value="G6">Grade 6</option>
                                      <option value="H1">Grade 7</option>
                                      <option value="H2">Grade 8</option>
                                      <option value="H3">Grade 9</option>
                                      <option value="H4">Grade 10</option>
                                      <option value="S1">Grade 11</option>
                                      <option value="S2">Grade 12</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="sect">Section</label>
                            <div class="col-md-4">
                                <select id="sect" name="section" class="form-control" required="">
                                    <option data-group='SHOW' value=""></option>
                                        <?php 
                                        $secResult = mysqli_query($connect, "SELECT * FROM tbl_section") or die(mysql_error());

                                        while($row = mysqli_fetch_array($secResult, MYSQLI_ASSOC)){
                                        ?>
                                        <option data-group='<?php echo $row['gradeLevel_id'];?>' value='<?php echo $row['section_id'];?>'><?php echo $row['name'];?></option>
                                        <?php }?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="subject">Subject</label>
                            <div class="col-md-4">
                                <select id="subject" name="subj" class="form-control" required="">
                                      <option value=""></option>
                                        <?php 
                                        $tid = $_SESSION['user_id'];
                                        $result = mysqli_query($connect, "SELECT tbl_subjteachers.*, tbl_subject.title FROM tbl_subjteachers, tbl_subject WHERE tbl_subjteachers.subj_id = tbl_subject.subject_id AND tbl_subjteachers.teacher_id = '$tid'") or die(mysql_error());

                                        while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                                        ?>
                                        <option value='<?php echo $row['subj_id'];?>'><?php echo $row['title'];?></option>
                                        <?php }?>                                          
                                </select>
                            </div>
                        </div>
                        <center>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <button id="signup" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> </button>
                                </div>
                            </div>
                        </center>
                    </fieldset>
                </form>

以下是剧本：

<script src="../../scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#gradelvl').on('change', function() {
            var val = $(this).val();
            var sub = $('#sect');
            $('option', sub).filter(function() {
                if (
                    $(this).attr('data-group') === val ||
                    $(this).attr('data-group') === 'SHOW'
                ) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
        $('#gradelvl').trigger('change');
    });

</script>

您认为这是什么问题？此外，Chart.js不会在我的移动浏览器上呈现，但会在我的PC /笔记本电脑上呈现。

可能有用的信息：我正在使用XAMPP并将我的localhost更改为自定义域。