How to display the selected value in a multiple dropdownlist?

Question

I am created form to select value to display in my page table.Below is my code to select multiple values and search to display, but it is not displaying the selected values (type and dates) in multiple dropdownlist. Anyone can help me solve this problem? Thanks.

My frontend coding:

       <div class="box inverse">
        <div class="row">
       <div class="col-lg-12">
        <header>
            <h5>Search</h5>
        </header>
        <form id="transaction_search">
            <div class="form-group">
                <div class="col-lg-12">
                    <div class="col-lg-3">
                    </div>
                    <div class="col-lg-12">


                        <div class="form-group">
                             <div class="col-lg-12">
                                 <label for="text1" class="form-group control-label col-lg-2"><?php echo $language['type']; ?>:</label>
                                <div class="col-lg-5">
                                <select id="select_type" class="form-group form-control required"">
                                <option value="transfer" selected><?php echo $language["transfer"]; ?></option>
                                <option value="withdraw"><?php echo $language["withdraw"]; ?></option>
                                <option value="upgrade"><?php echo $language["upgrade"]; ?></option>
                                <option value="register"><?php echo $language["register"]; ?></option>
                                <option value="receive"><?php echo $language["receive"]; ?></option>
                            </select>
                                </div>
                            </div>
                        </div>



               <div class="col-lg-12 form-group">
                            <label for="text1" class="form-group control-label col-lg-2">Date Range:</label>
                            <div class="col-lg-2">
                                <?php echo custom_period_opt(); ?>
                            </div>
                            <label for="text1" class="form-group control-label col-lg-2">Date Created:</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-group form-control datepicker" id="start_date" name="start_date" data-date-format="dd-mm-yyyy" title="" value="<?php echo $new_cur_date; ?>" readonly>
                            </div>
                            <label for="text1" class="form-group control-label col-lg-2">To</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-group form-control datepicker" id="end_date" name="end_date" data-date-format="dd-mm-yyyy" title="" value="<?php echo $new_cur_date; ?>" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12" style="text-align:center; padding-bottom:10px; padding-top:10px;">
                <button id="search" type="button" class="btn btn-sm btn-primary" onclick="search_('transaction_search','transaction_result','transaction_table')">Search</button>   
                <button id="clear" type="button" class="btn btn-sm btn-default" onclick="clearData()">Clear</button>    
            </div>              
            <div class="body" id="transaction_result" style="overflow:auto;">

            </div><!--body-->
        </form>
    </div>
</div>

My backend coding (This is part of coding I try to select "Withdraw" option to test output, but did't display any data in the table. This coding is want to select "withdraw" and select what I choose the "date"):

    <?php
    foreach ($_POST as $key => $value) {
$_POST[$key] = trim(preg_replace('/\s+/', ' ', ($value)));
 }
 $arr_val = $_POST;
 $loc = $arr_val['loc'];
  $action = $arr_val['action'];

 $select_type = $_POST['select_type'];
 unset($arr_val['loc']);
unset($arr_val['action']);
unset($arr_val['select_type']);

$tbl_name = 'withdrawal_record';
if ($action == 'search' && $select_type == 'withdraw' ) {
if ($_POST['select_type'] != '' || $_POST['start_date'] != '' || $_POST['end_date'] != '' ) {
    $sql = 'SELECT * FROM ' . $tbl_name . ' WHERE id is not null';

if($_POST['start_date']!='' && $_POST['end_date']!= '') {
            $sql .=' and a.created between "' . date('Y-m-d', strtotime($_POST['start_date'])) . '" and "' . date('Y-m-d', strtotime($_POST['end_date'])) . '"';
        }

    $result_arr['sql'] = $sql;
    $result_arr = get_data_list($sql);

    $i = 1;
    echo '<table id="dataTable_1" class="dataTable table table-bordered table-condensed table-hover table-striped" style="padding:0px;" border="1">
            <thead>
                <tr>
                     <th>No</th>
                     <th>Date</th>
                     <th>Amount</th>

                </tr>
            </thead>
            <tbody>';

    foreach ($result_arr as $rs_search) {


        echo "<tr>";
        echo "<td>" . $i++ . "</td>";
        echo "<td>" . $rs_search['created'] . "</td>";
        echo "<td>" . $rs_search['withdraw_amount'] . "</td>";
        echo '</td>';
        echo "</tr>";
    }
    echo '</tbody>';
    echo '</table>';
   }
  }


   ?>

Below is jquery function:

function search_(form_id, div_id, act_file) {
var action = 'search';
var extra = '&action=' + action;
var serialized = $('#' + form_id).serialize();
var form_data = serialized + extra;

$.ajax({
    //dataType: 'json',
    type: 'POST',
    url: '?f=' + act_file,
    data: form_data,
    beforeSend: function() {
        show_overLay();
        $('#' + div_id).html('');
    },
    success: function(data) {
        hide_overLay('');
        if (data) {
            $("#" + div_id).append(data);
            $('.dataTable').dataTable({
                pageLength: 25,
                destroy: true
            });
        } else {
            hide_overLay("Please fill in the field.");
        }
        //console.log(data);
    }
});
}

Below is my "withdrawal_record" table:

withdrawal_record

Below is my output, and didn't show the data what I select. Actually I want to select date between 04/11/19 and 07/11/19 and select type is "Withdraw":

Output 1

If success, that will show like below the output picture:

Output 2

Error output:

Output 3

Answer 1

In html add multiple attribute to select:

<select id="select_type" class="form-group form-control required" multiple>

In JQuery make these changes:

Remove these:

var action = 'search';
var extra = '&action=' + action;
var serialized = $('#' + form_id).serialize();
var form_data = serialized + extra;

And in Ajax request: Remove these lines:

data: form_data,

Add these lines:

data:{action:"search","loc":$("#select_type").val().toString()},

In PHP remove these lines:

 foreach ($_POST as $key => $value) {
$_POST[$key] = trim(preg_replace('/\s+/', ' ', ($value)));
 }
 $arr_val = $_POST;
 $loc = $arr_val['loc'];
  $action = $arr_val['action'];

And these lines instead:

$loc = $_POST['loc'];
$action = $_POST['action'];
$loc =explode(","$loc );
foreach($loc AS $val)
{
  echo $val; // your locations
}