Javascript 选项根据用户逐步显示'；选择

我想做一个大约有20个问题的调查。所有问题都在同一页上

整个调查的结构类似于树状结构

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

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

如果用户选择问题2的选项1、2、6，则出现问题3，否则转到问题12

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

当有很多问题时，用javascript切换问题（使用display:none和display:block）非常麻烦

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

以下代码是根据JacobM的anwer编写的。
出现另一个问题。
如果用户选择其他选项，我需要隐藏和显示另一个问题。
2a的选项1->显示q12
2a的选项4->显示q3和隐藏q12
第三季度的选项1->显示第四季度

---

2a的选项1->show q12，hide q3和q4我见过的大多数调查都是使用类似于a的界面在服务器端而不是客户端进行的。

考虑JQuery和

首先，一定要使用javascript框架。我喜欢jQuery，但是有很多好的

其次，找出一种方法，将适当的操作集存储为某种类型的抽象，而不是试图编写每个规则。比如你说

如果用户选择问题的选项1,2 1、调查结束。如果用户选择 问题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（next='end）

---

另一个问题出现了。如果用户选择其他选项，我需要隐藏ans并显示另一个问题。给出了该问题的示例。编辑了我的回答以添加复杂回答的选项。

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

if (jQuery.isFunction(next)) next;