有条件的简单下拉列表？答案

【问题标题】：Conditional simple drop down list?有条件的简单下拉列表？
【发布时间】：2010-12-23 19:50:52
【问题描述】：

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

抱歉，英语有任何错误，我不是母语人士。并提前致谢。

【问题讨论】：

您将需要 javascript。答案可能有点复杂。
您可以查看stackoverflow.com/questions/3637972/…是否涉及动态数据（从数据库中获取）。检查我对同一问题的回答stackoverflow.com/questions/3637972/…
嗨，我是初学者，我正在使用简单的基本内容，例如
这些“东西”是 html 标签。正如之前所说，您将需要 javascript。我推荐使用 jquery 库 (jquery.com)。它会让事情变得更短更容易。

标签： javascript html css

【解决方案1】：

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

如果您的下拉列表应该只根据列表 A 过滤其内容，那么您可能需要使用一些 JavaScript 来隐藏/删除您不想要的项目。考虑一下 jQuery，因为它是一个非常易于使用和理解的框架，并且在 Stack Overflow 和整个 Internet 上都有很多很好的示例供您参考。

如果您的数据需要从网络服务器传送（即，您有一个数据库，您要为列表值引用该数据库），那么您需要提供有关您的编程框架的更多信息（例如 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>

您的 JavaScript（我使用的是 jQuery，如上所述）可能如下所示：

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

【讨论】：

嗨，谢谢你的回答，所以对于函数我应该在部分中创建？提前致谢。
Phil，非常干净优雅的答案。 @Marcelo - 是的，你必须把它放在一个脚本标签中，当然还要在它之前包含 jQuery JS 文件。

【解决方案2】：

您可以使用 javascript appendChild()（例如 Here）并根据选择的选项动态附加 div。或者您可以让其他选择静态并用 css 隐藏它们，然后根据选择的选项显示您想要的。

【讨论】：

【解决方案3】：

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

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

【讨论】：

**会让他的生活更轻松=P

【解决方案4】：

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

您可以尝试发布一些代码，甚至是界面问题的演示......这是帮助您表达问题的好方法。

【讨论】：

从用户体验的角度来看，这可能不如使用 Javascript 隐藏和显示表单元素最佳。
最优意味着JavaScript依赖？不确定我是否同意。