如何使用Bootstrap框架和PHP从SQL数据库填充选择菜单选项?

时间:2015-02-05 03:28:02

标签: php twitter-bootstrap mysqli

我正在创建一个包含Select菜单的简单表单,该菜单需要使用SQL查询填充,该查询标识单个表和单列的所有唯一值。

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  </head>
  <body>

这是我想要的选择菜单的一个例子......

<form class="form-horizontal" role="form" method="post" action="db_test_bs.php">
 <div class="form-group">
   <label for="inputLocation" class="col-sm-2 control-label">Location</label>
     <div class="col-sm-4">
       <select class="form-control" id="inputLocation" name="inputLocation">
          <option>Smith</option>
          <option>Henry</option>
          <option>Jackson</option>
          <option>Hamilton</option>
        </select>
      </div>
    </div>

这是我尝试使用查询填充的“选择”菜单...

<form class="form-horizontal" role="form" method="post">
  <div class="form-group">
    <label for="inputLocation" class="col-sm-2 control-label">Location</label>
      <div class="col-sm-4">
        <select class="form-control" id="inputLocation" name="inputLocation">
        </select>

    <?php
      $servername = "localhost";
      $username = "owner_1";
      $password = "owner_1";
      $dbname = "test1";

    // Create Connection
      $conn = mysqli_connect($servername, $username, $password, $dbname);

    // Check connection
      if (!$conn) {
          trigger_error("Connection failed: " . mysqli_connect_error());
          }
    //Run Query
      $stmt = "SELECT DISTINCT `CUST_NAME` FROM `customer` WHERE 1";
      $result = mysqli_query($conn,$stmt) or die(mysqli_error());
        while(list($category) = mysqli_fetch_row($result)){
          $option = '<option value="'.$category.'">'.$category.'</option>';
          echo ($option);
        }

      mysqli_close($conn);
   ?>

     </div>
  </div>
</form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

上面代码的结果是两个选择菜单。一个是硬编码的静态选项,另一个是Select菜单,不包含任何选项。

使用WAMP和BootStrap 3.
我是web dev的新手,所以任何帮助都非常感激。

2 个答案:

答案 0 :(得分:1)

应该是:

<select class="form-control" id="inputLocation" name="inputLocation">
...
//Your PHP Code
...
</select>

注意:在这种情况下,您的查询中确实不需要WHERE 1。您可以直接回显结果,而无需将其变为变量,如下所示:

echo '<option value="'.$category.'">'.$category.'</option>';

答案 1 :(得分:0)

(正如@Sean所提到的)您已经在PHP之前关闭了<select></select>标记,因此您的PHP循环在<select>元素的一侧

另外,作为最佳做法,您应该通过将mysqli_error()变量传递到$conn函数来修复mysqli_error语句,如下所示:

$result = mysqli_query($conn,$stmt) or die(mysqli_error($conn));

注意:您应该在开发环境中报告PHP错误。

这是更新的代码

<form class="form-horizontal" role="form" method="post">
    <div class="form-group">
        <label for="inputLocation" class="col-sm-2 control-label">Location</label>
        <div class="col-sm-4">
            <select class="form-control" id="inputLocation" name="inputLocation">

            <?php
               $servername = "localhost";
               $username = "owner_1";
               $password = "owner_1";
               $dbname = "test1";

            // Create Connection
            $conn = mysqli_connect($servername, $username, $password, $dbname);

            // Check connection
            if (!$conn) {
                trigger_error("Connection failed: " . mysqli_connect_error());

            }
            //Run Query
            $stmt = "SELECT DISTINCT `CUST_NAME` FROM `customer` WHERE 1";
            $result = mysqli_query($conn,$stmt) or die(mysqli_error($conn));
            while(list($category) = mysqli_fetch_row($result)){
                echo '<option value="'.$category.'">'.$category.'</option>';
            }


            mysqli_close($conn);
            ?>

            </select>

        </div>
    </div>
</form>

</body>
</html>