Search code examples
phpbootstrap-selectpicker

Dropdown using bootstrap select gives blank dropdown

I have been looking at other related questions but I was unable to solve my query. I am using PDO:postgresql-php to retrieve values from database and display options in the dropdown using select options. The code was working till I used bootstrap-selectpicker and since then I am unable to see values in dropdown. You can see the code below:

<select class="selectpicker" data-style="btn-info">
           <option hidden><h4>Please select the lake</h4></option>
           <?php
                 $sql=$conn->prepare("select colname from public.table where id< 5"); 
        $sql->execute();
        if (!$sql) {     die('Could not connect: '); }
        while ($row = $sql->fetch()){
            echo '<option value="'.htmlspecialchars($row['colname']).'">'.htmlspecialchars($row['colname']).'</option>';
        }

   ?>
     </select>  
    <script>
          $(document).ready(function(){
          $('.selectpicker').selectpicker(
            style: 'btn-info',
            size: 4
            );

          });
    </script>

What am I missing here?

Solution

  • The correct Bootstrap Select is achieved as follows:

    <select class="form-control">

    As taken from: https://getbootstrap.com/docs/3.3/css/#forms