Jquery步骤:添加新的选项卡的基础上选择

Question

我正在使用jquery步骤从我的网站上的用户收集一些表单数据，但我有一些困难弄清楚如何在用户选择的结果上添加一个新的选项卡

形式:

{{ Form::open(array('url' => 'jobs/save', 'class' => 'form-horizontal', 'id' => 'wizard', 'method' => 'PUT', 'file' => true)) }}
    <h3>Project Overview</h3>
        <fieldset>
                    <div class="bdb">
                        <p class="text-center bdb">Basic Info</p>
                        <input class="span5" type="text" name="title" placeholder="Project Title"><br/>
                        <select name="workType" id="workType" placeholder="What type of project Is it?">
                            <option value="0">What Type of Project is this?</option>
                            <option value="1">New Construction</option>
                            <option value="2">Remodel</option>
                            <option value="3">Professional Services</option>
                            <option value="4">Repair and Maintenance</option>
                            <option value="5">Handyman</option>
                        </select>
                        <br/><br/>
                        <input type="text" name="budget" id="budget" placeholder="What is your budget?"><br/>
                    </div>

            </fieldset>

我想有一个额外的选项卡根据选择输入的值出现。在看到这个答案之前，我试图在body而不是脚本中这样做。现在我很困惑，我想我离答案越来越远了。

下面是我的脚本:

<script> $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            onFinished: function (event, currentIndex)
            {
                 var form = $(this);
                form.submit();
            }
        });
 $(function()
{
    var wizard = $("#wizard").steps({
        onStepChanging: function(event, currentIndex, newIndex)
        {
            if (currentIndex === 0)
            {
                if ($("#workType > option:selected").val() === "1")
                {
                    wizard.steps("insert", 1, {
                        title: "Result 2",
                        contentMode: "html",
                        content: "<p>test</p>"
                    });
                }
            }
            return true;
        }
    });
});

你可能会说，我没有太多的jquery经验。提前感谢你的帮助。

编辑:我应该补充说明向导的格式是正确的，但它目前没有添加新的选项卡或通过点击"下一步"推进

Answer 1

我得到了这个工作:

<script> $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            onStepChanging: function(event, currentIndex, newIndex)
            {
                //only apply to first step
                    if (currentIndex === 0 && ($("#workType > option:selected").val()) === "1")
                    {
                            $("#wizard").steps("insert", 1, {
                            title: "Step Title",
                            content: "<p>Step Body</p>"
                            });
                    }
             return true;
            },
            onFinished: function (event, currentIndex)
            {
                 var form = $(this);
                form.submit();
            },

        });