我目前有一个页面允许用户通过select（调查的“问题”）输入不同类型的数据库条目，即多选，文本，下拉等。每个至少包含一个{{ 1}}和2 textarea s。
现在，这是通过在HTML中有4个div来完成的，其中3个是通过CSS隐藏的（“display：none”）。然后在input type="text"更改中点击JS操作，该操作使用switch语句正确隐藏和取消隐藏所有div。 select删除除当前所选div之外的所有div，因为它们对Form.onsubmit s使用相同的name个。
显然，这是非常低效和丑陋的。我认为正确的方法是使用JS创建元素，我吮吸的东西，然后当用户更改select时，从表单中删除子div并添加所需的表单div。但是，我不知道该怎么做
如果有人能告诉我如何处理我的建议，或者展示如何做得更好，我将不胜感激。
感谢。
答案 0 :(得分：0)
实际上你的方法听起来并不太糟糕。我要问的两个问题之一是将它们命名为同一个东西的原因 - 如果它们真的代表相同的数据，为什么不为所有4个部分实际使用相同的表单元素呢？
我想要改进的另一件事是需要在表单提交时从DOM中删除任何内容。这不仅增加了提交过程的复杂性，而且如果用户点击后退按钮再试一次，也可以防止出现问题。
每次更改值时我都不会创建/销毁元素 - 这不仅效率更低，维护更容易，更容易受到错误的影响，并且会泄露用户输入的任何信息。< / p>
我认为有两个主要选项可以为您改善：
1）保持相同的字段
如果这4种类型确实每个都有3个公共字段，那么为什么不将它们放在一个永远不会被隐藏的部分中，并且在特殊部分中只有每种类型的唯一信息可以显示或隐藏当SELECT元素的值发生变化时。
2）禁用隐藏的字段
禁用的字段不会发送到服务器。因此，您可以在多个元素上保留相同的名称，而无需在提交前删除它们，只要您确保只有一个元素未被禁用。我使用了一个toggleDisabled方法，该方法将获取一个元素，并递归遍历所有子节点和所有后代，并禁用或启用input / select / textarea元素。然后我可以传入一个元素并启用/禁用所有表单元素。它可以完美地用于你想要做的事情 - 你会隐藏你的DIV，然后你会禁用它。然后，您将显示并启用所选的一个。