0

我真的很想有一个使用 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>

4

1 回答 1

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();
    });
});
于 2013-04-05T00:01:24.807 回答