使用JavaScript的动态下拉表单

时间:2013-04-04 23:42:51

标签: javascript html css forms cascadingdropdown

我真的很想使用JavaScript下载表单。我需要它来创造一个问题。工作原理:来自主页的人员将点击“创建问题”,然后进入“创建问题”页面。在那个页面上,它询问这个人的第一个问题是“你想问什么类型的问题?”然后,通过几个单选按钮,他们可以选择他们想要的类型,“多选”,“选择最佳”或“简答”。从那时起,更多的表单出现......换句话说,根据他们想要问的问题类型,要求他们填写一套不同的标准,然后再向服务器提交他们想要问的问题。 。这有意义吗?到目前为止,这是我的表格:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Quick Bump</title>
            <link href="styles.css" type="text/css" rel="stylesheet" />
        </head>

        <body>
            <div class="center">

            <h1 class="welcomeHeader">Create a Question:</h1>
            <form action="http://www.example.com/profile.php">

            <p class="pStyle">Please select what type of Question you'd like to ask:
                <br />
                <br />
                <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice
                <input type="radio" name="genre" value="Select the Best" /> Select the Best
                <input type="radio" name="genre" value="Short Answer" /> Short Answer
            </p>
            <br />

            <p class="pStyle">What is your Question?
                <br />
                <br />
                <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br />
            </p>
            <br />

            <p class="pStyle">What are the answers available?
                <br />
                <br />
                <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br />
                <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br />
                <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br />
                <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br />
            </p>
            <br />

            <p class="pStyle">Would you like to submit this question now?</p>
            <input type="submit" class="submitLink" name="submit form" value="Submit" />
        </form>
    </div>
    <br />
    <div class="footer">
        <a href="firstWebPage.html" class="links">Home</a>
    </div>
</body>

1 个答案:

答案 0 :(得分:0)

随着前一个表单元素的更改,您可以使用jQuery逐步显示每个连续的段落。

这是一个有希望让你开始的例子: http://jsfiddle.net/kevincollins/uarZb/

$(function () {
    $('.pStyle:first').show();
    $('input[name="genre"]').change(function(){
        $('.pStyle:eq(1)').show();
    });
    $('input[name="Question"]').change(function(){
         $('.pStyle:eq(2)').show();
    });
    $('input[name^="Answer"]').change(function(){
         $('.pStyle:eq(3)').show();
    });
});