如何为表单创建可变数量的输入？

Posted 2023-03-23

【中文标题】如何为表单创建可变数量的输入？

【英文标题】：How do I create a variable-number of inputs for a form?

【发布时间】：2020-02-23 01:51:32

【问题描述】：

我有一个数据库，用于存储需要定期更新的各种项目的参考信息（例如，项目 A 可能具有“完成天数”和“成本”字段，而项目 B 可能具有“位置”、“承包商”字段”和“年龄”）。我正在构建一个 web 应用程序，需要在单击时为每个可能的项目类型创建一个输入表单。我有一个按钮，显示不同项目的下拉菜单，但我不知道如何创建可变长度输入表单。这一切都应该发生在同一个网页上。想法？

示例：当单击项目 A 时，将出现一个表单，其中显示“完成天数”和“成本”的输入选项，但当单击项目 B 时，将出现一个表单，用于“位置”、“承包商”和“年龄。”

【参考方案1】：

I would do it with jquery as follows:    
$("#drop-down-id").change(function()
$("#form-id").empty()
if($("#drop-down-id").val()=="Project a")
   $("#form-id").append('<input type="date" name="day-completed">')
   $("#form-id").append('<input type="number" name="cost">')
   $("#form-id").append('<input type="submit" value="submit">')

if($("#drop-down-id").val()=="Project b")
   $("#form-id").append('<input type="text" name="location">')
   $("#form-id").append('<input type="text" name="contractor">')
   $("#form-id").append('<input type="number" name="Age">')
   $("#form-id").append('<input type="submit" value="submit">')

);