Question

我有一个下拉选项，用户可以在其中选择一个名称，相关数据将随选择一起加载。一切正常，但它总是在第二次或第三次选择后保留第一个数据。当我第二次选择值时，如何删除第一个选定的数据？

<table  class="table table-striped table-bordered"  id="example">
    <thead>
        <tr>            
            <td>Course Code</td>
            <td>Name</td>
            <td>Grade</td>                      
        </tr>
    </thead>
</table>  

<script type="text/javascript">
    $('#student').on('change', function(e) {               
        $('#example tr:last').remove().end();
        var std_id = $('#student option:selected').attr('value');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({ 
            type: "POST", 
            url: "{{url('ajax-student-result')}}",
            data: {
                std_id: std_id
            },
            success: function(data) {                  
                $.each(data, function(index, subcatObj) {
                    $('#example tr:last').after('<tr><td id="code">' + subcatObj.c_code + '</td><td id="course_name">' + subcatObj.c_name + '</td><td id="grade">' + subcatObj.grade + '</td></tr>');
                });
            } 
        });
    });
</script>

Answer 1

我猜你正在使用Symfony和Twig。

我认为CSRF令牌只能使用一次，所以如果你不为每个ajax帖子请求更新你的csrf令牌，那么它可能就是它只运行一次的原因。

编辑：发现这个问题可能对您有所帮助： Generate new CSRF token without reloading the entire form

Answer 2

更改代码以包含删除：

success: function(data) {
            $('#example tr:last')remove(); 
            $.each(data, function(index, subcatObj) {
                $('#example tr:last').after('<tr><td id="code">' + subcatObj.c_code + '</td><td id="course_name">' + subcatObj.c_name + '</td><td id="grade">' + subcatObj.grade + '</td></tr>');
            });
        }

AJAX无法删除DOM数据

2 个答案: