尝试创建包含相同数据的动态选择框答案

【问题标题】：Trying to create dynamic select boxes that contains same data尝试创建包含相同数据的动态选择框
【发布时间】：2014-01-03 06:25:49
【问题描述】：

我正在尝试创建包含相同数据的动态选择框，但是，只有第一个选择框包含数据，其他选择框不包含。

有人可以帮助我如何相应地填充其他人。

<input type="button" value="Add" onclick="addRow('dataTable')" />
<input type="button" value="Delete" onclick="deleteRow('dataTable')" />
<?php $i= 1; ?>
  <table id="dataTable">
    <tr>
      <td><input type="checkbox" name="chkbox[]"/></td>
      <td> 1 </td>
      <td><select name="fireman[]"><option value=""></option><?php require("php/fireman_list.php"); ?></select> </td>
    </tr>
   </table>

JS 代码

<script language="javascript">
  function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount + 1;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("select");
    element2.type = "text";
    element2.name = "fireman[]";
    cell3.appendChild(element2);
  }

  function deleteRow(tableID) {
    try 
    {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;

      for(var i=0; i<rowCount; i++) 
      {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) 
        {
          table.deleteRow(i);
          rowCount--;
          i--;
        }
      }
    }
    catch(e) 
    {
      alert(e);
    }
  }
</script>

【问题讨论】：

您缺少在选择标签中添加选项的代码。但首先你需要有一组选项值来填充它或使用 ajax 调用
我试图提取的数据来自数据库......所以它仍然是这条线吗？：link@wisdom

标签： javascript php

【解决方案1】：

错误...根据我对您的代码的理解，我不太确定您使用的工具是否正确。

您在服务器端使用 PHP 来生成 HTML 页面，那么为什么还要费心在 JavaScript 中进行呢？即使在 JQuery 的帮助下，动态添加 DOM 元素也是一件麻烦、冗长和乏味的事情。

如果您希望您的页面仅显示其部分内容，通常的做法是在页面上创建所有可能的内容，并屏蔽您不想要的部分（使用 CSS 属性）。

我假设您不打算允许在您的页面上创建无限数量的...嗯...无论这些动态表代表什么？

如果您可以将限制设置为 10 个实例，您可以使用简单的 PHP 循环创建这 10 个实例（或者甚至通过复制粘贴 HTML 代码来进行概念验证测试），然后替换您的创建/带有显示/隐藏机制的破坏过程。

最初，只会显示第一个实例。 “添加”按钮将使下一个可见，而“删除”按钮将使最后一个不可见。

如果您按 Id（即“DataTable_0”、“DataTable_1”等）对表实例进行索引，则使用 CSS 很容易打开和关闭它们，如下所示：

function hide_table (table_number)
{
    document.getElementById ("DataTable_"+table_number).style.display = 'none';
}

您可以使用block 而不是none 作为显示属性让它们重新出现。

你怎么看？

【讨论】：

好吧，那不行，因为用户应该能够输入多达 30 个选择框。并且由于它与删除选择框有关，用户应该能够选择他们希望删除的任何选择框，无论是第一个选择框和/或中间的选择框。 @kuroi neko
好的。 10 只是一个例子。如果您要求，PHP 可以生成 1000 个表。至于隐藏/显示元素，我只是按照你的示例代码。如您所见，可以按任何顺序隐藏元素。此外，将display 设置为none 会从显示中删除元素，就好像它已被销毁一样（尽管它不是:)）。真的，我认为你应该重新考虑。您最终可以使您当前的解决方案发挥作用，但这不是明智的做法，恕我直言。现在等待第二意见，自己看看。

【解决方案2】：

您需要更改 addRow 函数，以便它接受两个附加参数，这些参数是数组，由创建的选择项的选项的值和文本组成。

selValue 将是 select 和中的选项值数组

selText 将是 select 中选项的 Text 数组

让代码为：

function addRow(tableID, selValue, selText)
{
  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name="chkbox[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount + 1;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("select");
  element2.type = "text";
  element2.name = "fireman[]";

  //dynamically adding data from arrays passed
  for(var i=0; i<selValue.length;i++)
  {
      op=document.createElement("option");
      op.text= selValue[i];
      op.value= selText[i];
      cell3.add(op);
  }
  // dynamic adding end
  cell3.appendChild(element2);
}

【讨论】：