添加更多由 php 生成的选择字段答案

【问题标题】：Add more select fields generated by php添加更多由 php 生成的选择字段
【发布时间】：2021-05-27 18:34:54
【问题描述】：

我在由 PHP 填充的 HTML 页面上有一个选择字段，来自 MySQL db。

echo "<select name='author_id[]' size='1'>";

foreach ($authors as $author) {
    echo "<option value=$author[id]>$author[last_name]</option>";
}

echo "</select>";

如何在此处利用 JavaScript 添加更多字段？这也将使用 php 列出所有作者。

例如，如果书有多个作者，用户可以按如下按钮：

<button title='Press for add author.' onclick='addBookAuthor()'>More authors</button>

JS：

addBookAuthor() {
    ... to be done))
}

JS 函数应该是什么样子的？我知道 JS 可以将文本添加到已经存在的 HTML 字段，但在我的情况下，HTML 是由 PHP 动态生成的......这让我有点困惑。

希望最终所有添加的作者都可以在$_POST['author_id'] 数组中使用

【问题讨论】：

这个问答应该会有所帮助：stackoverflow.com/questions/33651802/…
见这里：stackoverflow.com/questions/61628313/…
它们很好，但是没有 AJAX/jQuery 是否可以做到这一点？
请记住，php 是访问数据并构建 html/js 的工具。当html/js交给浏览器时，php（以及所有的数据查找）就完成了，php就出局了。所以从 html/js 的角度来解决这个问题：你需要没有被 html 显示的数据吗？您要么需要通过 ajax 请求它，要么已经在提供的页面中的 javascript 数据结构中拥有信息。后者当然是可能的，但通常比您想要发送的信息多得多。在大多数应用程序中，ajax 是一个更好的解决方案。
你是对的，当用户点击按钮时，php 将无法访问，我的错。需要添加已显示数据的选择选项，只需多个。正如我所描述的，它是作者列表，如果书籍有 1> 个作者，请添加更多作者列表。可能 select 的多个属性可以提供帮助，但是 4 大小且没有滚动看起来很奇怪，所以没办法。

标签： javascript php

【解决方案1】：

您可以使用clone() 方法克隆您的第一个由 php 代码生成的选择框，然后在您的 DOM 中附加相同的选择框。

演示代码：

function addBookAuthor() {
  //get first select-box clone it
  var cloned = $("select[name*=author_id]:first").clone();
  $("#add").append($(cloned)) //add that in your dom..
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button title='Press for add author.' onclick='addBookAuthor()'>More authors</button>

<div id="add">
  <!--suppose this is html genrated of php code -->
  <select name='author_id[]' size='1'>
    <option value=1>A</option>
    <option value=2>B</option>
    <option value=3>C</option>
  </select>
</div>

【讨论】：

【解决方案2】：

也没有使用 jQuery，只使用 JavaScript：

function addAuthorField() {
    var author = document.getElementById('author_id');
    var parent = author.parentNode;
    var author_cloned = author.cloneNode(true);
    parent.appendChild(document.createElement('br'));
    parent.appendChild(author_cloned);
}

如果您发现任何错误，请更正。

【讨论】：