根据选择选项值更改动态加载html表[关闭]

I am having a drop-down with values fetched from MySQL database. On changing the drop-down value I need to get html table with respect to select value. How can achieve that.

dashboard.php

 <select name="value" id="select01" class="w1-20">

 <?php $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('test2');

 $id = $_GET['id'];

 $find=mysql_query("SELECT id,asset_type from equipment");
 while($row=mysql_fetch_array($find))
  {
   echo "
   <option id='".$row['id']."'  value='".$row['id']."'>".$row['asset_type']."</option>";
   print_r($row['id']);
   echo $row['id'];

  }

 ?>
 </select>


    <?php
                $host    = "localhost";
                $user    = "root";
                $pass    = "";
                $db_name = "test2";
                $lastId="";

                //create connection
                $con = mysqli_connect($host, $user, $pass, $db_name);

                //test if connection failed
                $result = mysqli_query($con,"SELECT SUM(cost) FROM track_data WHERE start_time > 
                  DATE_SUB(NOW(), INTERVAL 2 HOUR) ");

                $result1 =  mysqli_query($con,"SELECT SUM(cost) FROM track_data WHERE start_time > 
                  DATE_SUB(NOW(), INTERVAL 1 WEEK)");

                $result2 =  mysqli_query($con,"SELECT SUM(cost) FROM track_data WHERE start_time > 
                  DATE_SUB(NOW(), INTERVAL 1 MONTH)");

                // echo $result;
                ?>

<div class="col-md-12 ">
    <div class="col-md-6 col-md-offset-3">

        <div class="content table-responsive table-full-width" id="show_table">
          <!-- <h5 class="text-center"> Overall Consumption </h5> -->
          <h4 class="title text-center"> Overall Consumption</h4>
            <table class="table table-hover table-striped">    
        <tr class="t_head"> 
          <th>  Days </th>
          <th> Usage  </th>
          <th> Total Cost  </th>
          <!-- <th> Activity </th> -->
           <!-- <th> Total Cost </th> -->
        </tr>       
<?php
while($row = mysqli_fetch_array($result))

{

echo "<tr>"; 
  // echo "<td>" .$row['asset_type']. "</td>";
 echo "<td> Today </td>";
  echo "<td>1 Hour</td>";
echo "<td>" .$row[0]. "</td>";
 // echo "<td>" .$row['profit']. "</td>";

echo "</tr>";

}

 while($row1 = mysqli_fetch_array($result1))

{

echo "<tr>"; 
 echo "<td> Week </td>";
  echo "<td>1 Week</td>";
echo "<td>" . $row1[0] . "</td>";
 // echo "<td>" . $row1['profit'] . "</td>";

echo "</tr>";


}

while($row2 = mysqli_fetch_array($result2))


{


echo "<tr>"; 
 echo "<td> Month </td>";
  echo "<td>1 Month</td>";
echo "<td>" . $row2[0] . "</td>";
echo "</tr>";  
}
?>  
      </table>
    </div>

</div>
    </div>

    <!-- total cost time data -->

            </div>
        </div>
    </div>
</div>
    $(function () { 
    // $("#show_table").show();

    $("#select01").on("change", function () {        
        $("#show_table").hide();
        var show = $("div[id='" + $(this).val() + "']").show();
        alert(show);
    });
});

I have given the code for select option, table and jquery for onchange. I need to get respective details int the table for the option value selected. How to achieve that.

My first tip to you is separate the concerns, ergo: use 1. a Twig engine or 2. set all PHP login above your html code in a php file.

Echoing the plain html is not the best of options.

Another tip is use PDO prepared statements and/or a DBAL layer (link).

The thing you want to achieve can be done using javascript.

If you want you can generate a for each category or selectable option and assign a class or attribute to the div which you'll use in your javascript selection to hide() or show() them.

You could do a select on change function and redirect to the same page with the value in the parameter. With php you check the GET parameters and output the appropriate content, depending on what parameter is set.

$('select').change(function(){
  var value = $(this).val();
  window.location.replace("http://stackoverflow.com?site=" + value);
});

// now, check parameter with PHP

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
</select>

</div>

I would do it like this:

On pageload, only load the table for the first option, in your case Oxygen..

then in your jquery:

$("#select01").on("change", function () { 
     var selected = $(this).val(); // get the selected value
     $("#show_table").load("ajax/table.php?selected="+selected); // load the table in the div
});

in your ajax/tables.php file you make something like this:

<?php 
$selected = $_GET["selected"];
//query the data from your database
?>

<h4 class="title text-center"> Overall Consumption</h4>
<table class="table table-hover table-striped">    
   <tr class="t_head"> 
      <th>Days </th>
      <th> Usage  </th>
      <th> Total Cost  </th>
      <!-- <th> Activity </th> -->
      <!-- <th> Total Cost </th> -->
   </tr>   

if your table-head is always the same, I would place the show-table not before it but instead after your tablehead like:

<div class="content table-responsive table-full-width">
          <!-- <h5 class="text-center"> Overall Consumption </h5> -->
          <h4 class="title text-center"> Overall Consumption</h4>
            <table class="table table-hover table-striped">    
        <tr class="t_head"> 
          <th>  Days </th>
          <th> Usage  </th>
          <th> Total Cost  </th>
          <!-- <th> Activity </th> -->
           <!-- <th> Total Cost </th> -->
        </tr>   
        <div id="show-table"></div>
        </table>