javascript - 根据用户输入创建多步骤表单

Question

所以我不确定该如何表达，但我想创建一个多步骤表单，询问用户几个问题，然后根据他们的选择显示不同的代码。我做了一个简单的 jsfiddle to explain .当他们选择答案时，它会自动淡入下一个问题或显示一组代码，如图像。此外，让它与单选按钮一起使用。

这叫什么，我需要 javascript 来完成它吗？

<select>

    <option>Select Color</option>
    <option>Green</option>
    <option>Blue</option>
    <option>Red</option>
    <option>Orange</option>

</select>

Answer 1

一些提示:

jsFiddle Demo

(1) 我使用了 position:absolute 所以所有的 DIV 都将位于彼此之上。 See here for more info about absolute/relative/fixed/static positioning

(2) 使用change()事件检测SELECT值何时发生变化

(3) fadeOut 所有具有class="ques" 的 DIV，然后 fadeIn 您希望下一个显示的那个

(4) 每个 DIV 和每个 SELECT 都有一个唯一的、编号的 ID 属性。我们获取刚刚更改的 SELECT 的编号，将该 ID 从字符串转换为整数，然后加一。现在我们知道哪个 DIV fadeIn()

(5) 最初的 $('#q1').show(); 只是显示第一个问题，让事情开始，因为在 CSS 中我们使用了 .ques{ display:none;} 隐藏所有问题，包括第一个问题。

jsFiddle Demo

HTML:

<div id="bubble">
    <div id="contain">
        <div id="q1" class="ques">
        <p>Which is your favorite color?</p>
        <select id="q-1">
            <option>Select Color</option>
            <option>Blue</option>
            <option>Red</option>
            <option>Green</option>
            <option>Orange</option>
        </select>
        </div><!-- #q1 -->
        <div id="q2" class="ques">
        <p>Which is your favorite car?</p>
        <select id="q-2">
            <option>Select Car</option>
            <option>Ford</option>
            <option>Chev</option>
            <option>Kia</option>
            <option>Peugot</option>
        </select>
        </div><!-- #q2 -->
    </div><!-- #contain -->
</div><!-- #bubble -->

jQuery:

$('#q1').show();

$('select').change(function(){
    $('.ques').fadeOut(800);
    var num = $(this).attr('id').split('-')[1];
    var nxt = parseInt(num) + 1;
    $('#q'+nxt).fadeIn(800);
});

---

编辑:

非常感谢。如果他们选择绿色而不是红色，是否可以显示不同的选择？

$('select').change(function(){
    $('.ques').fadeOut(800);

    var ans = $(this).val();
    if (ans == 'Green'){
        $('#q15').fadeIn(800);
    }else if (ans == 'Red'){
        $('#q12').fadeIn(800);
    }
});

Revised jsFiddle