使用ajax的下拉式onchange

Question

我的表单中有一个下拉列表，用于过滤数据。我使用ajaxonchange函数根据所选列表过滤数据。

我的下拉列表如下所示：

<select id="opt_level" name="opt_level">
    <option value="level1">Level 1</option>
    <option value="level2">Level 2</option>
    <option value="level3">Level 3</option>
</select>

这是我想要显示onchange数据的div：

<div id="opt_lesson_list">
    <!-- Some statement here -->
</div>

当有onchange on下拉列表时，它将通过以下ajax功能：

jQuery(document).ready(function($) {
    $("#opt_level").on('change', function() {
        var level = $(this).val();
        if(level){
            $.ajax ({
                type: 'POST',
                url: 'example-domain.com',
                data: { hps_level: '' + level + '' },
                success : function(htmlresponse) {
                    $('#opt_lesson_list').html(htmlresponse);
                    console.log(htmlresponse);
                }
            });
        }
    });
});

然后转到url示例域。com检查是否有来自ajax的帖子：

if(isset($_POST['hps_level'])){
    // Statement to select from database
}

因此，过滤完成后，

编辑

My PHP只是根据所选值从数据库中筛选数据：

if(isset($_POST['hps_level'])){
    $sql = "SELECT DISTINCT(hps_lessons) FROM holiday_program_setup WHERE hps_level = '".$_POST['hps_level']."'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '<ul class="list-unstyled subjects">';
            echo '<li class="bordered" style="width: 30%;">';
            echo $row['hps_lessons'];
            echo '</li>';
            echo '</ul>';
        }
    }
    $sql = NULL;
}

如果我echo$_POST['hps_level'] 我可以获得所选下拉列表的值。




Answer 1

提供有效的url，becz数据过滤器至hps_级别

jQuery(document).ready(function($) {
    $("#opt_level").on('change', function() {
        var level = $(this).val();
        alert(level);
        if(level){
               $.ajax ({
                type: 'POST',
                url: 'example-domain.com',
                data: { hps_level: '' + level + '' },
                success : function(htmlresponse) {
                    $('#opt_lesson_list').append(htmlresponse);
                    alert(htmlresponse);
                },error:function(e){
                alert("error");}
            });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="opt_level" name="opt_level">
    <option value="level1">Level 1</option>
    <option value="level2">Level 2</option>
    <option value="level3">Level 3</option>
</select>

<div id="opt_lesson_list">
    <!-- Some statement here -->
</div>

Answer 2

我的整个表单是相乘的，并显示在我用来显示onchange数据的div中。

似乎您正在指向ajax url示例域。com到所有html页面所在的页面，ajax将整个html页面返回到div响应

尝试创建另一个空白php页面，并将您的phpisset代码放入新的php文件中。

if(isset($_POST['hps_level'])){
    // Statement to select from database
}

用新的php文件url替换你的ajax url。通过这样做，您的ajax将从新文件中获取所有数据并显示在响应div中。