动态添加一个带有由 php 填充的选项的选择框到表单答案

【问题标题】：dynamically adding a select box with options populated by php to a form动态添加一个带有由 php 填充的选项的选择框到表单
【发布时间】：2011-09-28 10:26:20
【问题描述】：

我有一个发送消息表单，其中包含由 PHP 查询填充到数据库的收件人列表。我希望能够通过向表单动态添加选择框来包含多个收件人，具体取决于他们希望向多少人发送消息。

我不太了解 javascript，我一直在研究网络，以了解如何动态地将选择框添加到带有 PHP 填充选项的表单中，但我似乎唯一能找到的是如何根据在前一个选择框中选择的内容来填充选项。

这是我的 Javascript：

<script type="text/javascript">
function add_recipient_field(){
    var container=document.getElementById('addanother');
    var to_field=document.createElement('select');
    to_field.name='to[]';
    to_field.type='file';
    container.appendChild(to_field);
    var br_field=document.createElement('br');
    container.appendChild(br_field);
}
</script>

这是我的 PHP ：

$tosql = "SELECT UserID, FirstName, LastName FROM users WHERE Active = 'yes' ORDER BY LastName ASC";
$query = mysqli_query($dbc, $tosql) or die("Error: ".mysqli_error($dbc));
$tobox .= "<option value=\"None\">None</option>\n";
while ($row = mysqli_fetch_array($query)) {
    if ($row['UserID'] == $to) {
        $tobox .= "<option value=\"$row[UserID]\" selected=\"selected\">$row[LastName], $row[FirstName]</option>";
    } else {
        $tobox .= "<option value=\"$row[UserID]\">$row[LastName], $row[FirstName]</option>";
    }
}

这是我的 HTML：

<div id="addanother"><li><label for="to">To: </label><select name="to[]" id="to">$tobox</select><a href="javascript:void(0);" onClick="add_recipient_field();">add more</a>$toerror</li></div>

当我单击“添加更多”链接时，它会添加另一个选择框，但是该框中没有选项，因此它显示为空。我知道我错过了一些相当简单的东西，但如果有人可以帮助或指出我的教程方向，我将非常感激。

【问题讨论】：

标签： php javascript

【解决方案1】：

add_recipient_field 所做的只是添加一个空选择。我知道这是您的难题，但我的观点是，根据您上面列出的功能，添加一个空选择是它应该做的，因为这就是它的编写目的。您仍然需要以某种方式填充数据。

请记住，PHP 仅在服务器上运行，不会与浏览器中当前加载的页面进行交互。可以使用Javascript调用服务器端的PHP，使用返回的数据对页面进行原地修改，但是PHP本身无法在文档加载后进行修改。

您有 3 个主要选项。

您可以在用户每次选择“添加更多”时重新加载页面，并让 php 使用新选择重新构建页面。请记住，为了获得适当的可用性，您必须每次都传递所有表单数据并在重建表单时重新填写。
您可以完全从 Javascript 构建选择，这意味着页面上的 Javasript 需要手头有所有必需的数据。 PHP 的 json_encode 方法对于快速执行此操作非常有帮助。您将所有数据加载到页面顶部的 javascript 对象中，然后每次添加新选择时，都会从该数据中填充新选择。
您可以阅读通常称为“AJAX”的内容，其中页面上的 javascript 与服务器上的 PHP 交互，以便根据请求动态加载数据并更改已加载的页面而无需刷新。这是两种先前选择的混合，可能是更高级的方法，但学习最有价值。

【讨论】：