下拉菜单填充了在按钮单击时添加的数据库数据

Question

我很困惑如何使用数据库值填充添加按钮单击的下拉列表。我用jQuery做按钮点击下拉的添加功能。但似乎我无法用数据库值填充我的 jQuery 中的选择标签的选项。请帮帮我...

这是我的php页面

     <?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>

用于在按钮单击时添加下拉菜单的 jQuery 代码是：

编辑：

 $(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>

但输出显示如下： 谢谢

Answer 1

好吧，您需要将$row['companyName'] 的值（在您的foreach 循环中）取出echo

另一种实现是...假设您的 PHP 中有一个值数组。

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

还有 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>