包含由单击按钮添加的数据库数据的下拉列表

Question

I am confused how to populate my dropdown that adds on button click with database values . I used jQuery to do the adding function of dropdown on button click. but it seems like i cant populate the options of the select tag inside my jQuery with database values. Please help me out...

This is my php page

     <?php include("connect.php");
      $smt = $conn->prepare('select CompanyName From Company');
      $smt->execute();
      $data = $smt->fetchAll();
      ?>

       <div class="form-group" id='TextBoxesGroup'>
            <label for="layer" class="col-sm-3 control-label">Layer</label>
            <div id="TextBoxDiv1" class="col-sm-6">
              <select class="form-control" id='textbox1' name="company" placeholder="Company" >

               <?php foreach ($data as $row): ?>
                   <option><?=$row["CompanyName"]?></option>
                <?php endforeach ?>

              </select>
            </div><hr/>

          </div> 

           <div class="form-group" >
            <div class="col-md-9 text-right">                 
               <input type='button' class="btn btn-default" value='Add +' id='addButton'>
            </div>
          </div>

The jQuery code used to add dropdown on button click is:

EDIT:

 $(document).ready(function(){

  var counter = 2;

  $("#addButton").click(function () {

  if(counter>5){
        alert("Only 5 Layers allowed");
        return false;
   }
  var companies = [<?php echo "'".join("','",$data)."'";?>];
  var newTextBoxDiv = $(document.createElement('div'))
   .attr("id", 'TextBoxDiv' + counter);

  newTextBoxDiv.after().html('<div class="form-group" id="TextBoxesGroup"><label class="col-sm-3 control-label">Layer '+ counter + ' : </label>' +' <div id="TextBoxDiv1" class="col-sm-6"><select class="form-control" name="textbox' + counter + '" id="textbox' + counter + '" name="company" placeholder="Company">');

 $.each(companies, function(key, value){
    newTextBoxDiv.append('<option>'+value+'</option>');
});

newTextBoxDiv.append('</select> </div></div>');  
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
   });

});

 </script>

But the output shows like this: Thanks

Answer 1

Well, you need to echo out the value of $row['companyName'] (the one inside your foreach loop)

Another implementation would be... say you have an array of values in your PHP.

$data = array("company A", "company B", "company C");

And the javascript...

<script>
var companies = [  <?php echo "'". join("','", $data) . "'";?>  ];
//This generates : ['company A', 'company B', 'company c'];

function insertOptions()
{
    $.each(companies, function(key, value){
        $("#IDofSelectTag").append("<option>"+value+"</option>");
    });
}
</script>