我想在我的网站上创建一个动态表单。
在我的网站上有几个特定主题的表格，但我也有一个带有主题下拉列表的联系我们表格，他们可以从中选择主题特定表格涵盖的任何主题。
现在，如果他们选择网站设计查询，我需要询问他们的网址，而网址与所有其他查询主题无关，如果他们询问网站托管，我再次需要他们的网址，但也需要他们的托管包的偏好。
如果他们询问移动应用程序开发，我不需要网站或托管包字段，但需要显示 4 个复选框，以便他们勾选与要为其开发移动应用程序的平台相关的选项。
所以它需要自动适应所选的查询类型。
我怎样才能做到这一点？
【问题讨论】：
您可以使用 jQuery 来实现。
您需要在下拉选择中添加 jQuery 更改侦听器。然后根据所选值将表单元素添加到容器中。
这是一个小例子
$( ".select" ).change(function() {
var value = this.val();
if(value == "webDesign")
{
$("#fieldsContainer").append('<input name="webUrl" class="inputField"/>');
}
});
你也可以改变action url accroding to select Value，这样处理不同的表单会更容易
if(value == "webDesign")
{
$("form#myForm").attr('action','process.php?type=webdesign');
}
【讨论】：
你的问题很模糊，但答案是有很多方法可以实现。最常用的方法之一是使用 javascript（或使用 js 的 jQuery 之类的库）。
我已经为你准备了一个基本函数，它将展示它是如何在纯 js 中完成的：
Services: <select id="service">
<option value="stuff">stuff</option>
<option value="webdesign">webdesign</option>
</select><br />
<span id="webname">Website: <input type="text" /></span>
document.getElementById("service").onchange = function () {
if (document.getElementById("service").options[document.getElementById("service").selectedIndex].value == "webdesign")
document.getElementById("webname").style.display = "none";
else
document.getElementById("webname").style.display = "block";
}
这里是上述代码的演示页面：http://jsfiddle.net/w3pGr/
【讨论】：