Question

我有4个具有以下ID的选择列表：price_sort，power_sort，area_sort，source_sort。而且我正在使用jQuery .change()函数，使用ajax发送POST数据，以获取具有排序结果的控制器响应。

Javascript：

        $('#price_sort').change(function () {
            var price_sort = $(this).val();

            // sessionStorage.setItem('product', $(this).val());

            $.ajax({
                method: 'post',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/products/filters',
                data: {
                    order: price_sort
                },
                success: function(data) {
                    $('#products').html(data.products_view);
                    // console.log(data);
                },
                error: function(jqxhr, status, exception) {
                    console.log('Error ' + exception);
                }
            });
        });

当前我仅使用1个选择列表，但是如何使用.change()跟踪所有4个选择列表并发送数据？

Answer 1

不要像在$('#price_sort').change中那样使用ID，而要使用为所有选择函数赋予的Class。

您需要像这样$('.price_sort').change并给出所有选择：class="price_sort"而不是id="price_sort"

Answer 2

我建议您像这样通过ajax发送所有4个值：

$('#price_sort,#power_sort,#area_sort,#source_sort').change(function () {
            var price_sort = $('#price_sort').val();
            var power_sort= $('#power_sort').val();
            var area_sort= $('#area_sort').val();
            var source_sort= $('#source_sort').val();

            // sessionStorage.setItem('product', $(this).val());

            $.ajax({
                method: 'post',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/products/filters',
                data: {
                    price_sort: price_sort,
                    power_sort: power_sort,
                    area_sort: area_sort,
                    source_sort: source_sort
                },
                success: function(data) {
                    $('#products').html(data.products_view);
                    // console.log(data);
                },
                error: function(jqxhr, status, exception) {
                    console.log('Error ' + exception);
                }
            });
        });

如果您想按一种类型进行排序，那么我建议您获取ID并将其作为一种排序类型进行传递

$('#price_sort,#power_sort,#area_sort,#source_sort').change(function () {
var sortType = this.id;
var order = $(this).val();
...
 data: {
  order:order,
  sortType:sortType 
}

带有ajax帖子的多个选择过滤器

2 个答案: