如何使用JavaScript / JQuery生成动态表单？

Question

假设一个form.php文件，并且有一个“添加”按钮，一旦单击它，将显示一个下拉列表，让您选择所需的输入类型。 例如：

<select name="Type">
        <option value="Text">Text</option>
    <option value="MultipleChoice">MultipleChoice</option>
    <option value="Checkbox">Checkbox</option>
</select>

我的问题是，我不知道如何实现该功能，一旦选择了类型，假设复选框，那么将显示一个复选框，并且可以让您输入每个复选框的标签，就可以一个接一个地执行此功能。 我也想使此过程可以迭代进行。 我不确定我是否解释清楚，有点像google form函数。 有任何想法吗？ 如果提供一些代码会更好。 谢谢！

Answer 1

这是普通的香草老派HTML / JS

<select name="Type" onchange="showformelement(this.value)">
    <option value="text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
<script>
function showformelement(whichelement){
    //use whichelement to embedd element in DOM
}
</script>

如果您可以使用jQuery或类似的工具包，则可能会简单得多

Answer 2

我知道您在寻找什么，只是让您知道它不是一个简单的脚本，它将具有太多的功能，并且很难构建。

刚开始时，如果您在网上搜索基于PHP和jQuery的表单生成器以及类似的东西，您会发现许多准备使用的脚本。 好吧，如果您不想搜索一个，则原理逻辑如下所示：

PS：我将解释如何使用jQuery开发。

<select id="options">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>

<script>
$(document).ready(function(){
$('#options').change(function(){
var optSelected = $('#options option:selected').val()    
  if(optSelected == 1){
    // Shows up and div with Checkboex for edit
  }
  if(optSelected == 2){
    // Shows up and div with Combobox for edit
  }
  if(optSelected == 3){
    // Shows up and div with Textbox for edit
  }
  })
})
</script>

完成之后，您将需要构建每种类型的选项...太多的工作...看，我没有在此处编写脚本，我只是向您解释了如何构建...

这是一个巨大的系统...您需要了解一些JavaScript才能使用其中的一个...

Answer 3

甚至更简单，无需进行任何大小写或条件调整（使用jQuery）。

示例： http ： //jsfiddle.net/SMAfA/

$(function() {
    $("#type").change(function() {
        type = $("option:selected", this).text();
        $("#target").append("<input type="+type+">");
    })
})