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所有DIV与class="ques"，然后淡入您想要显示的那个

（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

Answer 2

您需要使用javascript来完成此操作。我添加了一个小提琴来解释它是如何完成的。

使用以下网址检查小提琴：http://jsfiddle.net/hec4otv3/17/

HTML代码：

<div id="step1">
<div class="bubble">
    <div class="contain">
    <p>Which is your favorite color?</p>
        <select id='color'>
  <option value="">Select Color</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="orange">Orange</option>
</select>
    </div>    
</div>
after selecting answer, it should fade into a new question/code.
</div>
<div id="blue-step" class="hide">
    <div class="bubble">
    <div class="contain">
    <p>Which is your favorite sub-color?</p>
        <select id='color'>
  <option>Select Color</option>
  <option>dark Blue</option>
  <option>light blue</option>
  <option>sky blue</option>
  <option>navy blue</option>
</select>
    </div>    
</div>
</div>
<div id="red-step" class="hide">
    you choose red
</div>
<div id="green-step" class="hide">
    you choose green
</div>
<div id="orange-step" class="hide">
    you choose orange
</div>

使用Javascript：

window.shownextstep=function(){
    var txt=document.getElementById('color').value;
    document.getElementById('step1').style.display='none';
    document.getElementById(txt+"-step").style.display='block';
}
var e=document.getElementById('color');
e.onchange=shownextstep;

CSS：

.bubble {
    width:220px;
    height:150px;
    background:url("http://i.imgur.com/MBRmEEf.png")no-repeat;
    background-position:center;
    background-size:200px;
}
.contain {
    padding: 10px 0 0 30px;
}
select {
    margin-left:10px;
}
.hide{
    display:none
}

Answer 3

听起来你应该使用JQuery动画http://api.jquery.com/animate/。要获得淡入淡出效果，您要使用的属性之一是不透明度。您可能还想使用一些缓和进出。然后，您可以调用complete（）函数来加载下一个问题。

Answer 4

你可以尝试通过jQuery检查这个值。而不是提醒您可以给jquery任何你喜欢的命令。

$(document).ready(function(){
    $('select').change(function(){
        var selectVal = $(this).find(':selected').val();
        if(selectVal == 'Green'){
            alert(selectVal);
        }
        else if(selectVal == 'Blue'){
            alert(selectVal)
        }
        else if(selectVal == 'Red'){
            alert(selectVal)
        }

        else {
            alert(selectVal)
        }
    });
});

http://jsfiddle.net/hmd0t5u5/1/

Answer 5

这里有一个完整的简单三步示例，不需要jQuery。

您只需要定义submit_form()功能。 HTML字符«和»分别打印«和»，这对于上一个和下一个按钮字符可能很有用。

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <select id="num1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>

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

5 个答案: