Question

假设有一个form.php文件，并且有一个“添加”按钮，一旦点击它，就会显示一个下拉列表，让你选择你想要的输入类型。例如：

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

我的问题是，我不知道如何实现这个功能，一旦选择了类型，假设复选框，然后会显示一个复选框，并且可以让你输入每个复选框的标签，你可以这样做一个一个人。另外，我想让这个过程迭代发生。我不确定我是否清楚解释，它有点像谷歌形式功能。有任何想法吗？如果提供一些代码会更好。谢谢！

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

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

3 个答案: