基于select选项值变化动态加载html表

pkwftd7m  于 2021-06-20  发布在  Mysql
关注(0)|答案(3)|浏览(431)

关闭。这个问题需要更加突出重点。它目前不接受答案。
**想改进这个问题吗?**通过编辑这篇文章更新这个问题,使它只关注一个问题。

两年前关门了。
改进这个问题
我有一个下拉列表,里面有从mysql数据库获取的值。在更改下拉值时,我需要得到与select值相关的html表。如何才能做到这一点。

Jmeter 板.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);
    });
});

我已经给出了onchange的select option、table和jquery的代码。我需要在表格中为所选的选项值获取相应的详细信息。如何做到这一点。

f0brbegy

f0brbegy1#

我给你的第一个建议是分开关注点,因此:使用1。一个或两个细枝发动机。在php文件中的html代码上方设置所有php登录。
回显纯html并不是最好的选择。
另一个技巧是使用pdo准备的语句和/或dbal层(link)。
您想要实现的事情可以使用javascript来完成。
如果需要,您可以为每个类别或可选选项生成一个,并为div分配一个类或属性,您将在javascript选择中使用它来隐藏()或显示()它们。

lnvxswe2

lnvxswe22#

我会这样做:
在pageload上,仅加载第一个选项的表,在您的情况下是oxygen。。
然后在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>

如果你的table头总是一样的,我会把展示桌放在你的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>
1dkrff03

1dkrff033#

您可以执行select on change函数并重定向到参数中的值所在的页面。使用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>

相关问题