使用 JavaScript 的动态下拉表单答案

【问题标题】：dynamic drop down form using JavaScript使用 JavaScript 的动态下拉表单
【发布时间】：2013-04-04 23:42:51
【问题描述】：

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

【问题讨论】：

标签： javascript html css forms cascadingdropdown

【解决方案1】：

您可以使用 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();
    });
});

【讨论】：

哇，这似乎很有道理。如果我有任何问题，我会处理并更新您，但说真的，谢谢！
哦，其实我有一个。那么我应该为这段代码制作一个单独的文件，还是应该将它放在创建问题文件中？
无论哪种方式都可以，但最好将脚本放在单独的文件中。
那么，如果我想让它只有在用户点击“确定”按钮而不是点击框外或点击标签时才会显示下一件事，是否有这样做的方式？如果有人选择了不同的单选按钮，那么清除某些 pStyle 内容呢？
所以我想出了如何在选择不同的单选按钮后隐藏一个部分，但是如果我输入相同的文本字符串，在“输入问题”区域，如果我点击选项卡输入答案部分不显示：S