Javascript 条件简单下拉列表？_Javascript_Html_Css

Javascript 条件简单下拉列表？

javascript html css

Javascript 条件简单下拉列表？,javascript,html,css,Javascript,Html,Css,我正在尝试用HTML编写一个网站，我有一个问题。我使用带有选项a和B的下拉列表，但在选择其中一个选项后，我想在同一页面上创建另一个下拉列表和文本字段，其中包含不同的问题。例如，如果有人选择A，则会被问到问题C和D，如果有人选择B，则会被问到问题E和F。编程的最佳方式是什么对不起，我的英语有误，我不是以英语为母语的人。提前感谢。这取决于数据是静态的（即在页面上编码且不会更改）还是动态的（即从web服务器传送）如果您的下拉列表应该只根据列表A过滤其内容，那么您可能需要使用一些JavaScrip

我正在尝试用HTML编写一个网站，我有一个问题。我使用带有选项a和B的下拉列表，但在选择其中一个选项后，我想在同一页面上创建另一个下拉列表和文本字段，其中包含不同的问题。例如，如果有人选择A，则会被问到问题C和D，如果有人选择B，则会被问到问题E和F。编程的最佳方式是什么

对不起，我的英语有误，我不是以英语为母语的人。

提前感谢。

这取决于数据是静态的（即在页面上编码且不会更改）还是动态的（即从web服务器传送）

如果您的下拉列表应该只根据列表A过滤其内容，那么您可能需要使用一些JavaScript来隐藏/删除不需要的项目。考虑一下jQuery，因为它是一个非常容易使用和理解的框架，在堆栈溢出和整个Internet上都有很多很好的例子，你可以参考。如果您的数据需要从web服务器交付（即，您有一个数据库用于列表值），那么您需要提供更多关于您的编程框架（例如ASP.Net、PHP等）以及您希望列表如何工作的信息（Ajax、整页回发等）

假设页面上的所有内容都是静态的，并且根据用户的选择隐藏信息

您的HTML可能如下所示：

<body>
    <div id="myQuestions">
        <select id="QuestionOptions">
            <option value="A">Question A</option>
            <option value="B">Question B</option>
        </select>
    </div>
    <div id="myAnswers">
        <div id="A" style="display: none;">
            <div id="QuestionC">
                <p>Here is an example question C.</p>
            </div>
            <div id="QuestionD">
                <select id="QuestionOptionsD">
                    <option value="G">Question G</option>
                    <option value="H">Question H</option>
                </select>
            </div>
        </div>
        <div id="B" style="display: none;">
            <div id="QuestionE">
                <p>Here is an example question E.</p>
            </div>
            <div id="QuestionF">
                <select id="QuestionOptionsF">
                    <option value="I">Question I</option>
                    <option value="J">Question J</option>
                </select>
            </div>
        </div>
    </div>
</body>

$(function () {
    $('#QuestionOptions').change(function () {
        $('#myAnswers > div').hide();
        $('#myAnswers').find('#' + $(this).val()).show();
    });
});

具有与第一个下拉列表中的每个选项对应的隐藏下拉列表。在第一个下拉列表上使用onclick处理程序更改相应的隐藏下拉列表的隐藏属性

jQuery可能会让您的生活更轻松。

您可以使用javascript

appendChild（）

（示例）并根据选择的选项动态追加div。或者，您可以让另一个选择静态并用css隐藏，然后根据选择的选项显示您想要的选项。

我可能不理解您的问题，但听起来您可能过于复杂了。若您只是试图提示两组不需要javascript的独立问题，那个么您可以使用两个带有不同问题的独立页面。A->链接到带有问题C/D的页面，而B->链接到E/F

您可以尝试发布一些代码，甚至是界面问题的演示。。。这是一个很好的方法来帮助你清楚地表达你的问题。

你需要javascript。答案可能有点复杂。您可以检查是否涉及动态数据（从数据库获取）。检查我对同一个问题的回答嗨，我是一个初学者，我正在使用简单的基本东西，像这些“东西”是html标签。正如前面所说，您需要javascript。我建议使用jquery库（）。这将使事情变得更短、更容易。**将使他的生活更容易=p这可能不如从用户体验的角度使用Javascript隐藏和显示表单元素那么优化。优化意味着依赖Javascript？不确定我是否同意。嗨，谢谢你的回答，所以对于函数，我应该在零件内部创建上面函数的代码？提前谢谢。菲尔，回答得非常干净优雅@Marcelo-是的，你必须把它放在一个脚本标记中，当然还要在它前面包含jQueryJS文件。