时间戳

首页 > 解决方案 > 如何为表单创建可变数量的输入？

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

问题描述

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

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

标签： javascripthtmlsqldatabaseweb-applications

解决方案

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">')
}
});

推荐阅读