Question

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

对不起英文错误，我不是母语人士。并提前致谢。

Answer 1

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

如果您的下拉列表只应基于列表A过滤其内容，那么您可能希望使用一些JavaScript来隐藏/删除您不想要的项目。考虑一下jQuery，因为它是一个非常易于使用和理解的框架，并且在Stack Overflow和整个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>

你的JavaScript（我正在使用jQuery，如上所述）可能如下所示：

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

Answer 2

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

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

Answer 3

您可以使用javascript appendChild()（示例Here）执行此操作，并根据选择的选项动态追加div。或者你可以让其他选择静态并用css隐藏它们，然后显示你想要哪一个选择哪个选项。

Answer 4

我可能不理解你的问题，但听起来你可能过于复杂的事情。如果您只是尝试提示两组不同的问题而不需要javascript，那么您可以只使用两个单独的页面来解决不同的问题。 A - ＆gt;链接到具有问题C / D的页面，而B->链接到E / F.

您可以尝试发布一些代码甚至是界面问题的演示......这是一个很好的方式来帮助阐明您的问题。

有条件的简单下拉列表？

4 个答案: