Javascript 使用jQuery将选择选项从数据库填充到动态选择选项

从数据库中，我选择了成员的姓名作为选择选项。使用jQuery，我有一个动态添加按钮，可以使用append函数添加新的选择字段。但是，在append中传递php生成的select选项的标准方法是什么呢

我已经研究了一段时间，但无法让它工作。所以任何建议都会很有帮助

这是页面结构。看起来很乱，但请看一下。我在一开始就已经存在的静态选择中传递了$members，但对于动态选择，我创建了一个变量var members，并尝试在append中传递它，但它不起作用

<?php
   require_once 'db_connect.php';

   $members = '';
   $query = "SELECT memberID, memberName FROM members";
   $result = mysqli_query($connect, $query);
   while($row = mysqli_fetch_array($result))
   {
    $members .= '<option value="'.$row["memberID"].'">'.$row["memberName"].'</option>';
   }
   ?>
<script> 
   var members = "<?php echo $members; ?>";

   $(document).ready(function() {
          var fixHelperModified = function(e, div) {
                var $originals = div.children();
                var $helper = div.clone();
                $helper.children().each(function(index) {
                   $(this).width($originals.eq(index).width())
                });
                return $helper;
             },
             updateIndex = function() {
                $('div.index').each(function(i) {
                   $(this).html(i + 1);
                });
             };
          $("#add").sortable({
             helper: fixHelperModified,
             stop: updateIndex
          }).disableSelection();
          $("#addNew").click(function() {
             $('#add').append("<div class='row rem' id='move'><div class='col-md-1 index'>1. </div><div class='col-md-9'><select name='members[]'><option value=''>Select member</option>"+members+"</select></div><div class='col-md-1'><button class='delete btn btn-warning btn-xs'>Delete</button></div></div>");
             updateIndex();
          });
          $("body").on('click', '#add .delete', function() {
             $(this).closest(".rem").remove();
             updateIndex();
          });
       });
</script>
<form method="post">
   <fieldset>
      <div class="form-group">
         <div class="col-sm-2">
            <label class="form-name">Members</label>
         </div>
         <div class="col-sm-8">
            <div class="row">
               <div id='add'>
                  <div class='row rem' id='move'>
                     <div class='col-md-1 index'>1. </div>
                     <div class='col-md-9'>
                        <select name='members[]'>
                           <option value=''>Select member</option>
                           <?php echo $members; ?>
                        </select>
                     </div>
                     <div class='col-md-1'>
                        <button class='delete btn btn-warning btn-xs'>Delete</button>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="form-group">
                  <div class="col-md-2">
                     <button id='addNew' type="button" href="#">Add another</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </fieldset>
   <input type="submit" name="submitSave" value="Submit"> 
</form>

成员 1. 选择成员 第一 第二 删去 再加一个

---

我不明白您是否想使用jquery从已经生成的选项列表中添加选择选项每次用户单击“添加”按钮时使用php生成的选项？

如果您想这样做？您只需将php回显到javascript数组中即可

<script>
var members = []; // this is the javascript array been initialized
<?php
require_once 'db_connect.php';

$members = '';
$query = "SELECT memberID, memberName FROM members";
$result = mysqli_query($connect, $query);

$i=0 // index for the array
while($row = mysqli_fetch_array($result))
{
$raw_option = '<option   value="'.$row["memberID"].'">'.$row["memberName"].'</option>';
$option = htmlentities($raw_options); // there might be quotation that could break your javascript 
echo "members[{$i}] = '{$option}';"; // echoing the javascript first semi column is for javascript and second for php


$i++; // incrementing the index for the array
}
?>
</script>

---

然后jquery add按钮可以从members数组中选择每个选项

每个选项都有双引号，并将字符串放在同一个标记内，如果我理解正确，它将破坏代码，请尝试将其括在单引号内或使用var myvar=

我不理解你的代码，但如果你想在点击时添加一个选项，我认为这应该是可行的

<select name='members' id="members_select">
<option value=''>Select member</option>
</select>
<button id="add">Add Option</button>
<script>
var current_member = 0; // global variable that tells what part index of the members array we currently are..
add_button = document.getElementById("add");
add_button.addEventListener('click') = function(){
   // i imagine the members array above is already set
  $('#members_select').append(members[current_member]);
  current_member++;
}
</script>

---

首先，这将从一开始就破坏javascript：var members=；然后再次将其插入select元素的位置。修复可能运行的引号。尝试替换var成员=；我将其替换为var members=；并在append中以+members+的形式传递它。但它仍然不起作用。有什么建议吗@Ivankaraman每个选项都有双引号，u将字符串放在同一个标记内，如果我正确理解它会破坏您的代码，请尝试在单引号内换行或使用var myvar=；谢谢终于奏效了。var myvar=；这是一个完美的解决方案。非常感谢你的努力。我真的很感激@伊凡卡拉曼哇！谢谢，让我试试。你能在答案中加入附加部分吗？我在追加中遇到了引号问题。谢谢你的回答，但恐怕它不起作用。如果你使用htmlentities，你就不会有引号问题谢谢你的努力。伊万·卡拉曼已经解决了这个问题。但感谢您对备选方案的看法：好啊我不得不添加额外的内容，因为他们不允许我发表少于15个字符的评论