亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 ajax 函數發送多個值

使用 ajax 函數發送多個值

天涯盡頭無女友 2023-07-20 16:04:24
我有兩個選擇菜單:<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();        }    });});
查看完整描述

1 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

首先,您需要為兩個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>


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號