动态表单

Question

我想创建一个执行以下操作的脚本：

当通过单选按钮、下拉列表或复选框回答问题时，脚本会在选择单选按钮(或下拉列表，或除文本和文本区域之外的任何表单元素)时检查给定的选项是否会使脚本提出更多问题。

示例：

“Call me back”前面有一个复选框，选中后会显示另外两个字段(一个包含所有可用国家/地区的下拉列表，以及一个用于显示电话号码的文本字段)

另一个例子：

(假设我们是最终用户IT支持)

一个下拉菜单，用户可以在其中选择他们想要支持的主题(即硬件、软件)。然后，当用户选择一个主题时，它将显示一个包含更多主题的附加字段(例如:当用户选择硬件时，他们将获得电话、计算机等)，这反过来又会显示序列号的附加字段，可能是操作系统等

我想我将能够弄清楚如何在PHP和SQL中做到这一点，我只需要用HTML和jQuery在正确的方向上推动一点:AJAX我希望我足够清楚我想要脚本做什么。

提前感谢！:)

Answer 1

假设像这样的html结构：

<div id="question-1" class="top-question">
    What do you want?<br>
    <select>
        <option value='thing'>thing</option>
        <option value='item'>item</option>
    </select>
    <div id="question-1a" class="sub-question">
        How many of them?<br>
        <select>
            <option value='5'>five</option>
            <option value='10'>ten</option>
        </select>
    </div>
</div>

使用jQuery库(在这样的情况下，它使工作变得容易得多)，您可以这样做：

$('.sub-question').hide()
$('.top-question').bind('change',function(){
    $('.sub-question').show()
})

如下所示：http://jsfiddle.net/xtUk6/

这里不需要Ajax。其概念是您在页面上有所有的表单字段，只是在视觉上删除了。然后，每个问题都有自己的唯一id，当表单回发到服务器并在服务器上由php处理时，可以识别该id。

使用Ajax是可能的，但除非你有数百万个问题可以根据一些非常复杂的输入场景进行选择，否则它会导致延迟，同时它会不断地从服务器获取下一个问题。

Answer 2

您不必使用ajax，您可以做的是，当下拉列表更改时，将包含字段的div的CSS属性更改为非display:none;。

Answer 3

您也可以使用$().show() & $().hide()方法完成此操作。您需要将css选择器放在要显示或隐藏的项目的$()括号内。这是如果你想使用jQuery而不是仅仅使用display:none，就像上面建议的那样。