使用 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 () {

    var category = "";

    var category2 = "";

    load_data();

    function load_data(is_category, is_category2) {

        console.log(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, #category2', function () {

    //console.log($(this).attr('id'), category, category2)

        if ($(this).attr('id') === "category"){

          category = $(this).val();

        }else if ($(this).attr('id') === "category2"){

          category2 = $(this).val();

        }

        // 

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

        if (category != '') {

            load_data(category, category2);

        }

        else {

            load_data();

        }

    });

     

      // Select Box id="category2"

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

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

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

        if (category2 != '') {

            load_data(category, category2);

        }

        else {

            load_data();

        }

    });

});

<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">

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

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

</select>

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

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

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

</select>