选项根据用户的选择逐步显示

Question

我想构建一个包含约20个问题的调查。所有问题都在同一页面。

整个调查的结构就像树结构一样。

最初，只有一个问题显示在页面中。

如果用户选择问题1的选项1,2，则调查结束。 如果用户选择问题1的选项3,4,5，则出现问题2。

如果用户选择的问题2的选项1,2,6，然后问题3次出现，否则转到问题12.

如果用户选择问题3的1,2，转到问题5，否则转到问题4.

....

这是相当麻烦的切换问题（使用显示：无和显示：块）由JavaScript时，有许多问题。

在这种情况下最简单的方法是什么？

以下代码是根据雅各布的着作编写的。
出现另一个问题。
如果用户选择其他选项，我需要隐藏并显示另一个问题。
选项2a的1 - >显示Q12
选项4 2a的 - >显示Q3和隐藏Q12
选项1 Q3的 - >显示Q4
选项1 2a的 - >显示Q12，隐藏Q3和Q4 < - - 这种情况相当复杂

我该怎么办？

我已经看到了这样做的服务器端，而不是客户端，使用了一种类似于 wizard接口

var responses = { 
1 : {1:'end', 2:'end', 3:2, 4:2, 5:2, 6:2}, 
'2a': {1:12,2:12,3:3,4:3,5:3,6:12} 

}; 

function handleResponse(question, key) { 
    option = question.selectedIndex+1; 
    var next = responses[key][option]; 
    if (next=='end') return; 
    showQuestion(next); 
} 

function showQuestion(question){ 
    $('tr[id^=trQ'+question+']').show(); 
} 

Answer 1

首先，绝对使用javascript框架。我喜欢jQuery，但有很多好的。其次，找出一种方法来将一组适当的动作存储为某种抽象类型，而不是试图对每个规则进行编码。例如，你说

如果用户选择问题 1的选项1,2，则调查结束。如果用户选择问题1的选项3,4,5 ，则会出现问题2的 。

你可以编码到这个对象的层次结构作为

var responses = { 1: {1:'end', 2:'end', 3:2, 4:2, 5:2}, 
    2:{ //and the mappings here for the various responses for question 2} 
...etc. 
} 

然后，你需要一个函数把当前问题和响应为行动。

function handleResponse(question, option) { 
    var next = responses[question][option]; 
    if (next='end') return;//or however you want to handle being done. 
    showQuestion(next); 
} 

然后你只需要一个预订购采取showQuestion功能“2”和显示问题2（琐细使用jQuery）。

如果存在相当复杂的特定响应，则可以允许地图中的值为函数。因此，你可以有

2:{1:function(){show(3);hide(6);hide(14)}, 2:5, etc.} 

，然后添加到您的手柄响应方法（如后（未来='末端）...）

if (jQuery.isFunction(next)) next; 

Answer 2

大多数调查。

Answer 3

考虑JQuery和JQuery Wizard。