// html & jquery
 <select name="rooftop" id="rooftop" class="selectMenu">
            <option value="">Select an option</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>


    <button id="barButton">click</button>

    <div id="showBars">

    </div>


    <script type="text/javascript">

        $(document).ready(function(){

                          $("#barButton").click(function() {
                            var selected = $("#rooftop").val();
                            $.ajax({
                                   type: "POST",
                                   url: "your_php_script.php",
                                   data: {selected: selected},
                                   success: function(){
                                   alert("works");
                                   }

                            });
                          });

// code on your_php_script.php
 echo "<script type='text/javascript'> alert('works1'); </script>";

    if(isset($selectd)){
        echo "<script type='text/javascript'> alert('works2'); </script>";
        $sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE rooftop = 1";
        $result = mysqli_query($connection, $sql);
        if (mysqli_num_rows($result) > 0) {
            echo "<table id='list'><tr><th><h3>Name</h3></th><th><h3> Area</h3></th><th><h3>Happy Hour Times</h3></th></tr>";
            while($row = mysqli_fetch_assoc($result)) {
                echo "<tr> <th> <h6> " . $row["bar_name"] . "</h6> </th> <th> <h6>" . $row["area"] . "</h6> </th> <th> <h6>" . $row["hourStart"] . "-" . $row["hourEnd"] . "</h6> </th> </tr>";
            }
            echo "</table";
        }

    }