创建自我更新表单答案

【问题标题】：Creating a self updating form创建自我更新表单
【发布时间】：2011-09-22 01:49:05
【问题描述】：

我正在网页上创建一个表单，但我希望该表单随着用户输入值而改变。

示例：如果我们有一个下拉菜单：ObjectType

当有人选择Cars 时，我希望在下面显示新选项。说、制造、型号、年份和注释。

然而，如果那个人选择Vegetables，那么我可能想要的只是Root Vegetables 的复选框。

我的问题是最好的方法是什么。我的表格非常复杂，可能会有 20 种不同的可能设置，但我希望对这些设置进行排序。我将appendChild() 与AJAX 请求一起使用，但我最终得到了乱序字段。最重要的是，偶尔的慢速连接会让人们等待字段出现。

我应该将所有这些东西保存在一个数组中，而不是使用这些表单对象（技术上是表格的一部分）加载 HTML 页面吗？是否可以只加载一个 HTML 页面或 XML 对象并在保存后对该结果使用selectElementById()？

我正在加载的对象是行，这是一个示例以及它需要能够做什么：

<td>
    <strong>Abilities:</strong>
</td>
<td>
    <textarea 
        id ='abilities' 
        name="abilities" 
        style="width:100%" rows="4"  
        onchange='userCreation.updateAbilities()'
        onkeyup='userCreation.updateAbilities()'>
    </textarea>
</td>

我的页面中有一个表格，我正在使用 JavaScript 创建一个新的 tr 元素，将其设置为 innerHTML，然后附加子元素。有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript html forms dom

【解决方案1】：

我只是将所有表单元素放在一个页面中，并隐藏那些你不使用 CSS 的元素。这样您就可以维持秩序，而不必等待字段出现。它会稍微减慢页面加载时间，但会让您的生活变得更简单。

否则，我会将每个字段的名称（或其他名称）存储在一个数组或对象中，当需要 AJAX 加载它时，先查找它的位置并将其放在那里。

【讨论】：

基本上，使用可见性：隐藏；并在我准备好时使用 getElementById 获取 html？
我实际上倾向于display: none;，所以它不会占用空间（除非你不想要）。但是，是的，当您准备好时，您可以执行 document.getElementById('whatever').style.display = 'block'（或 visibility=visible，取决于您从什么开始）
这会产生一些非常奇怪的行为。也许块不是正确的显示模式？该行被推入第一个单元格。选择添加类型看看我的意思：gumonshoe.net/NewCard
table-row 工作，但我无法通过将其设置回 none 来删除它；有移除价值功能吗？ -- 没关系，我的程序逻辑错了。谢谢！
将其设置为 'table-row' 或只是 ''（空字符串）。这会让它恢复原状。（要清楚，将其设置为空字符串基本上就是将其删除。）

【解决方案2】：

只需在页面中包含整个 for 并根据用户交互而不是通过 AJAX 动态加载元素来更改不同部分的可见性。

【讨论】：