Options show step by step based on users' choices

Question

I want to build a survey which has about 20 questions. All questions are in the same page.

The structure of whole survey is like the tree structure.

Initially, only one question is shown in the page.

if user chooses option 1,2 of question 1, the survey ends. if user chooses option 3,4,5 of question 1, then question 2 appears.

if user chooses option 1,2,6 of question 2, then question 3 appears, otherwise go to question 12.

if user chooses 1,2 of question 3, go to question 5, otherwise go to question 4.

....

It's quite troublesome to switch questions (using display:none and display:block) by javascript when there are lots of questions.

What is the simplest way in this situation?

Following code is written according to JacobM's anwer.
Another problem appears.
I need to hide and show another question if user chooses another options.
option 1 of 2a -> show q12
option 4 of 2a -> show q3 and hide q12
option 1 of q3 -> show q4
option 1 of 2a -> show q12, hide q3 and q4 <--- this situation is quite complex

What should I do?

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

Most surveys I've seen do this server-side, not client-side, using an interface similar to a wizard.

Answer 2

Consider JQuery and JQuery Wizard.

Answer 3

First of all, definitely use a javascript framework. I like jQuery, but there are many good ones.

Secondly, figure out a way to store the set of appropriate actions as some type of abstraction, ratther than trying to code each rule. For example, you said

if user chooses option 1,2 of question 1, the survey ends. if user chooses option 3,4,5 of question 1, then question 2 appears.

You could encode this into a heirarchy of objects as

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.
}

Then you need a function to turn the current question and response into an action.

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

Then you just need a showQuestion function that willl take '2' and show question 2 (trivial with jQuery).

If there are particular responses that are quite complex, you could allow the value in the map to be a function. Thus you could have

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

and then add to your handle response method (after if (next='end)...)

if (jQuery.isFunction(next)) next;