title: Bootstrap Dropdown Select From MySQL
body: <p>Newbie question, what's wrong with my code, i can't populate dropdown select from mysql table. please advise, thank you</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="DataTables/Bootstrap-3.3.5/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="DataTables/DataTables-1.10.10/css/jquery.dataTables.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;  
      &lt;div id="wrapper"&gt;
          &lt;nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-dtb_master_item-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Data &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="master-item.html"&gt;Item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="master-brand.html"&gt;Brand&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="master-supplier.hatml"&gt;Supplier&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="master-customer.html"&gt;Customer&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="master-expedition.html"&gt;Expedition&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Transaksi &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="receiving.html"&gt;Receiving&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="update-data.html"&gt;Update Data&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="delivery-order.html"&gt;Delivery Order&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="packing-slip.html"&gt;Packing Slip&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="page-header"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;!-- START TOMBOL ACTION --&gt;
                          &lt;!-- Button trigger modal --&gt;
                          &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
                              Add New
                          &lt;/button&gt;
                          &lt;br&gt;&lt;br&gt;
                          &lt;!-- END TOMBOL ACTION --&gt;
  
                          &lt;!-- START MODAL --&gt;
                          &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" action="input_item.php" method="post"&gt;
                              &lt;div class="modal-dialog modal-lg" role="document"&gt;
                                  &lt;div class="modal-content"&gt;
                                      &lt;div class="modal-header"&gt;
                                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Input Item&lt;/h4&gt;
                                      &lt;/div&gt;
                                      &lt;div class="modal-body"&gt;
                                          &lt;!-- START FORM INPUT --&gt;
                                          &lt;form class="form-horizontal"&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-sm-3 control-label"&gt;Item Code&lt;/label&gt;
                                                  &lt;div class="col-sm-3"&gt;
                                                      &lt;input type="text" class="form-control" placeholder="Item Code" required="required" name="item_code"&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-sm-3 control-label"&gt;Item Name&lt;/label&gt;
                                                  &lt;div class="col-sm-4"&gt;
                                                      &lt;input type="text" class="form-control" placeholder="Item Name" required="required" name="item_name"&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-sm-3 control-label"&gt;SKU&lt;/label&gt;
                                                  &lt;div class="col-sm-3"&gt;
                                                      &lt;select class="form-control"&gt;
                                                          &lt;?php
                                                          #Include the connect.php file
                                                          include ('C:/xampp/htdocs/b/incl/connect.php');
                                                          $mysqli = new mysqli($hostname, $username, $password, $database);
                                                          /* check connection */
                                                          if (mysqli_connect_errno())
                                                              {
                                                              printf("Connect failed: %s\n", mysqli_connect_error());
                                                              exit();
                                                              }
                                                          $query = "SELECT * FROM master_sku";
                                                          $result = mysql_query($query);
                                                          while ($rows = mysql_fetch_array($result)) {
                                                          echo "&lt;option value=" .$rows['sku_code']. "&gt;" .$rows['sku_name']. "&lt;/option&gt;";
                                                          }
                                                          ?&gt; 
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-sm-3 control-label"&gt;Supplier Item Code&lt;/label&gt;
                                                  &lt;div class="col-sm-4"&gt;
                                                      &lt;input type="text" class="form-control" placeholder="Supplier Item Code" name="vendor_item_code"&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                                                      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/form&gt;
                                          &lt;!-- END FORM INPUT --&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
                          &lt;!-- END MODAL --&gt;
  
                          &lt;!-- START DATA TABEL --&gt;
                          &lt;div class="panel panel-default"&gt;
                              &lt;div class="panel-heading"&gt;Item Management&lt;/div&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;table id="dtb_master_item" class="table table-striped" cellspacing="0" width="100%"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;Item Code&lt;/th&gt;
                                              &lt;th&gt;Item  Name&lt;/th&gt;
                                              &lt;th&gt;SKU&lt;/th&gt;
                                              &lt;th&gt;Vendor Item Code&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                  &lt;/table&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- END DATA TABEL --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- CORE JS --&gt;
      &lt;script src="DataTables/jQuery-1.11.3/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="DataTables/Bootstrap-3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- DATATABLES JS --&gt;  
      &lt;script type="text/javascript" src="DataTables/DataTables-1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="DataTables/DataTables-1.10.10/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function() {
  
          // START DATATABLES MASTER ITEM 
          $('#dtb_master_item').dataTable( {
          "processing": true,
          "serverSide": true,
          "ajax": "incl/ssp_master_item.php",
           "columns": [
              { "width": "10%" },
              { "width": "50%" },
              { "width": "10%" },
              { "width": "30%" }
            ]
          } );
  
          // END DATATABLES MASTER ITEM   
  
          } );
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/107lO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/107lO.jpg" alt="enter image description here"></a></p>
  
  <p>if i separate my php code on a new php page, the query working fine
  <a href="https://i.stack.imgur.com/okqRQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/okqRQ.jpg" alt="enter image description here"></a></p>
  
  <p>it's working fine with html manual  code (not from database)</p>
  
  <pre><code>        &lt;select class="form-control"&gt;
                      &lt;option&gt;1&lt;/option&gt;
                      &lt;option&gt;2&lt;/option&gt;
                      &lt;option&gt;3&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ocryD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocryD.jpg" alt="enter image description here"></a></p>