使用JavaScript的动态下拉表单_Javascript_Html_Css_Forms_Cascadingdropdown

使用JavaScript的动态下拉表单

javascript html css forms

使用JavaScript的动态下拉表单,javascript,html,css,forms,cascadingdropdown,Javascript,Html,Css,Forms,Cascadingdropdown,我真的希望有一个使用JavaScript的下拉表单。我需要它来创建一个问题。工作原理：该人员将从主页单击“创建问题”，然后进入“创建问题”页面。在该页面上，它询问的第一个问题是“你想问什么类型的问题？”然后，通过几个单选按钮，他们可以选择他们想要的类型，或者是“多项选择”、“选择最佳”或者“简短回答”。从这一点上看，表格中会出现更多内容……换句话说，根据他们想问的问题类型，会要求他们在向服务器提交他们想问的问题之前填写一组不同的标准。这有意义吗？这是我目前的表格： <!DOCTYP

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


快速碰撞
创建一个问题：
请选择您想问的问题类型：




选择题
挑选最好的
简短回答



您的问题是什么？




问：




有哪些答案？




答：

B:

C:

D:




您想现在提交此问题吗

您可以使用jQuery在上一个表单元素更改时递增显示每个连续段落

下面是一个让您开始学习的示例：

哇，这似乎有道理。如果我有任何问题，我将与此合作并向您提供最新信息，但认真地说，谢谢！哦，实际上我有一个。那么，我应该为这段代码创建一个单独的文件，还是应该将其放在“创建问题文件”中？这两种方法都可以，但通常更好的做法是将脚本放在单独的文件中。因此，如果我想这样做，那么下一件事只有在用户点击“确定”按钮时才会显示，而不是点击框外或点击选项卡，有没有办法做到这一点？如果有人选择了另一个单选按钮，那么清除某些pStyle内容如何？因此，我想出了如何在选择另一个单选按钮后隐藏部分，但如果我输入相同的文本字符串，在“输入问题”区域，如果我点击选项卡，则输入答案部分不会显示：S

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