Html 下拉菜单不显示任何内容答案

【问题标题】：Html Dropdown Menu Displays nothingHtml 下拉菜单不显示任何内容
【发布时间】：2016-06-18 19:42:30
【问题描述】：

当我单击下拉列表中的值时，我正在尝试显示我的表格。当我查看页面代码源时，表格值在那里但没有显示。我想使用下拉列表中的值从 mysql 查询，并使用 mysql 查询中的数据填充表。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
  function jsFunction(value){   
    <?php
       $con=mysqli_connect("localhost","root","","dengue");
       // Check connection
       if (mysqli_connect_errno())
       {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
       }
       $result = mysqli_query($con,"SELECT * FROM mapping_details where case_type='value'";
      echo '<div class="table-responsive ">          
      <table class="table table-condensed table-hover table-bordered">
      <thead>
  <tr>
    <th>Barangay</th>
    <th>Case Type</th>
    <th>Total Dengue Cases</th>      
  </tr>
</thead>
<tbody>';
  while($row = mysqli_fetch_array($result))
  {
   echo "<tr>";
   echo "<td>" . $row['brgy'] . "</td>";
   echo "<td>" . $row['case_type'] . "</td>";
   echo "<td>" . $row['total_case_brgy'] . "</td>";

   echo "</tr>";
  }
 echo '</tbody></table></div>';
 mysqli_close($con);
?>
}
 </script>
    </head>
    <body>
      <select id ="ddl" name="ddl" onchange="jsFunction(this.value);">
      <option value='1'>One</option>
      <option value='2'>Two</option>
      <option value='3'>Three</option>
    </select>
    </body>
    </html>

原来，在我的其他网页中，php 代码在正文中。但是这一次，如果我使用下拉菜单，我就无法让它工作，所以我把它放在函数中以便我能够使用 onchange 函数。我已经阅读了一些使用 AJAX 或 JSON 的答案，但我不熟悉这些，所以如果可能的话，我只想使用 javascript，因为这可能是最简单的方法。

【问题讨论】：

您的 php 代码在 script 标记内使用 echo ...我认为应该 not 在 script 标记内并移至 body .
嗨@Mottie。感谢您指出我的错误。 Jon Foley 在下面的回答会产生错误并且什么都不查询。您能告诉我如何正确执行此操作吗？
对不起，我对 php 的了解不够，无法提供帮助；但听起来查询代码需要仔细检查。
@Mottie：我认为 {$value} 没有得到正确的值，这就是为什么查询什么也得不到，有什么帮助吗？谢谢！

标签： javascript php jquery mysql drop-down-menu

【解决方案1】：

您在这里尝试做的是在浏览器中运行 PHP 代码，这是您无法做到的。所有的 HTML、CSS 和 JavaScript 都被发送到客户端（您的浏览器），然后由浏览器呈现和初始化。当您调用 onchange 事件来调用 jsFunction() 时，您正在尝试在该函数中执行 PHP，但是您在客户端上运行 chrome 或 firefox 或某些浏览器，并且您无法在那里执行 PHP。 PHP 必须在页面加载时运行，然后可以在将其发送到客户端之前更改 html、css 或 JavaScript。

有两种方法可以做你想做的事。你可以发送一个 Ajax 请求（使用 javascript 调用你的服务器）来获取新数据，或者你可以提交一个重新加载页面的表单，你可以像你喜欢的那样运行 PHP——修改之前的 html、css 和/或 javascript返回给客户端（浏览器）。

这是一种非ajax方式，它只是不断地重新加载页面

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <?php
        $value = isset( $_POST['ddl'] ) ? $_POST['dll'] : 1; // we are setting 1 as the default
       $con=mysqli_connect("localhost","root","","dengue");
       // Check connection
       if (mysqli_connect_errno())
       {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
       }
       $result = mysqli_query($con,"SELECT * FROM mapping_details where case_type='{$value}'";
      $html= '<div class="table-responsive ">          
      <table class="table table-condensed table-hover table-bordered">
      <thead>
  <tr>
    <th>Barangay</th>
    <th>Case Type</th>
    <th>Total Dengue Cases</th>      
  </tr>
</thead>
<tbody>';
  while($row = mysqli_fetch_array($result))
  {
   $html.= "<tr>";
   $html.= "<td>" . $row['brgy'] . "</td>";
   $html.= "<td>" . $row['case_type'] . "</td>";
   $html.= "<td>" . $row['total_case_brgy'] . "</td>";

   $html.= "</tr>";
  }
 $html.= '</tbody></table></div>';
 mysqli_close($con);
?>
}
 </script>
    </head>
    <body>
      <form method="POST" action="">
        <select id="ddl" name="ddl">
          <option value='1'>One</option>
          <option value='2'>Two</option>
          <option value='3'>Three</option>
        </select>
      </form>

      <script>
        $("select#ddl").on("change",function(){
          $('form').submit();
        });
      </script>

      <?php echo $html; ?>

    </body>
    </html>

【讨论】：

我收到此错误：'注意：未定义的索引：第 10 行 C:\xampp\htdocs\Newfolder\testing.php 中的 dll'。第二件事是，它什么都不返回，我只能看到表头但没有任何值，所以它可能什么也不查询。谢谢。
我已经解决了这些问题。现在代码是经过测试的代码。它运行良好。
现在代码更有意义了。希望对您有所帮助。
审核通过后可见。
@KamalSingh：嘿，你说的修复在哪里？我已经批准了这个答案，因为这是他最有帮助的。如果您提供自己的答案，我会很高兴。谢谢！