使用 ajax 函数发送多个值

Question

我有两个选择菜单：

<select name="category" id="category" class="form-control" size="5">

         <option value="">name1</option>

         <option value="">name2</option>

</select>

<select name="category2" id="category2" class="form-control" size="5">

         <option value="">order_item1</option>

         <option value="">order_item2</option>

</select>

我想将每个选择框中的选定值发送到服务器端脚本（fetch.php）。因此我创建了一个函数：function load_data(is_category, is_category2) {}。

现在我遇到的问题是，只有第一个类别选择菜单 ( id="category") 中选定的值才会发送到我的服务器端脚本。所选值id="category2"不会发送到我的服务器端脚本。

完整代码：

$(document).ready(function () {

    load_data();

    function load_data(is_category, is_category2) {

        var dataTable = $('#product_data').DataTable({

            "processing": true,

            "serverSide": true,

            "order": [],

            "ajax": {

                url: "fetch.php",

                type: "POST",

                data: {

                    is_category: is_category,

                    is_category2: is_category2

                },

            }

        }); 

    }

   // Select Box id="category"

    $(document).on('change', '#category', function () {

        var category = $(this).val();

        $('#product_data').DataTable().destroy();

        if (category != '') {

            load_data(category);

        }

        else {

            load_data();

        }

    });

     

      // Select Box id="category2"

      $(document).on('change', '#category2', function () {

        var category2 = $(this).val();

        $('#product_data').DataTable().destroy();

        if (category2 != '') {

            load_data(category2);

        }

        else {

            load_data();

        }

    });

});

Answer 1

首先，您需要为两个select元素添加事件侦听器以获取它们的值。然后，您应该向load_data函数添加一个新参数以获取函数内的这些值。$(document).ready(function () {&nbsp; &nbsp; var category = "";&nbsp; &nbsp; var category2 = "";&nbsp; &nbsp; load_data();&nbsp; &nbsp; function load_data(is_category, is_category2) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(is_category, is_category2);&nbsp; &nbsp; &nbsp; &nbsp; var dataTable = $('#product_data').DataTable({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "processing": true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "serverSide": true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "order": [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "ajax": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "fetch.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; is_category: is_category,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; is_category2: is_category2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp;// Select Box id="category"&nbsp; &nbsp; $(document).on('change', '#category, #category2', function () {&nbsp; &nbsp; //console.log($(this).attr('id'), category, category2)&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).attr('id') === "category"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; }else if ($(this).attr('id') === "category2"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category2 = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('#product_data').DataTable().destroy();&nbsp; &nbsp; &nbsp; &nbsp; if (category != '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_data(category, category2);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_data();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; // Select Box id="category2"&nbsp; &nbsp; &nbsp; $(document).on('change', '#category2', function () {&nbsp; &nbsp; &nbsp; &nbsp; var category2 = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; $('#product_data').DataTable().destroy();&nbsp; &nbsp; &nbsp; &nbsp; if (category2 != '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_data(category, category2);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_data();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script><select name="category" id="category" class="form-control" size="5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value="name1">name1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value="name2">name2</option></select><select name="category2" id="category2" class="form-control" size="5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value="order_item1">order_item1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value="order_item2">order_item2</option></select>