選項根據用戶的選擇逐步顯示

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。