Question

我正在下拉菜单，其中包含从MySQL数据库获取的值。在更改下拉值时，我需要获取有关选择值的html表。如何做到这一点。

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);
    });
});

我给了select选项，表和jquery onchange代码。我需要在表格中获取有关选择的选项值的详细信息。如何实现。

Answer 1

我对您的第一个提示是，分别解决这些问题，因此：1.使用Twig引擎，或2.在php文件中的html代码上方设置所有PHP登录名。

选择纯HTML并不是最好的选择。

另一个技巧是使用PDO准备好的语句和/或DBAL层（link）。

您想要实现的目标可以使用javascript完成。

如果需要，可以为每个类别或可选选项生成一个，然后为div分配一个类或属性，以便在javascript选择中使用它们隐藏（）或show（）它们。

Answer 2

您可以进行更改时选择功能，并使用参数中的值重定向到同一页面。使用php，您可以根据设置的参数检查GET参数并输出适当的内容。

$('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>

Answer 3

我会这样：

在页面加载时，仅加载第一个选项的表格（在您的情况下是氧气）。

然后在您的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
});

在您的ajax / tables.php文件中，您将执行以下操作：

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

如果您的表头始终是相同的，我将不将show-table放在它的表头之前，而是放在它的表头之后，例如：

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

根据选择选项值更改动态加载html表

3 个答案: