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

Question

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.

Answer 1

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.