我正在尝试使用 HTML 对网站进行编程，但我有一个问题。我使用带有选项 A 和 B 的下拉列表，但选择其中一个后，我想在同一页面上创建另一个下拉列表和文本字段，并包含不同的问题。例如，如果有人选择 A，那么就会被问到问题 C 和 D，如果有人选择 B，则会被问到问题 E 和 F。对此进行编程的最佳方法是什么？
很抱歉有任何英语错误，我不是母语人士。 提前致谢。
最佳答案
这取决于数据是静态的(即在页面上编码且不会更改)还是动态的(即从网络服务器传递)。
如果您的下拉列表应该仅根据列表 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();
});
});
关于javascript - 有条件的简单下拉列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4521984/