Question

我正在使用jquery步骤从mysite上的用户那里收集一些表单数据，但是我在查找如何根据用户选择结果添加新选项卡时遇到了一些困难

表格：

{{ 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>

我希望根据select输入的值显示其他选项卡。在我看到this answer之前，我试图在身体而不是脚本中这样做。现在我感到困惑，我想我正在从解决方案中走得更远。

这是我的剧本：

<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经验。在此先感谢您的帮助。

修改：我应该补充一点，向导的格式正确，但它目前还没有添加新标签，也没有点击＆＃34; next＆＃34;。

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();

            },



        });

Jquery步骤：根据select添加新选项卡

1 个答案: