gpt4 book ai didi

javascript - 有条件的简单下拉列表?

转载 作者:太空宇宙 更新时间:2023-11-04 15:39:50 24 4
gpt4 key购买 nike

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

对于英语的任何错误,我深表歉意,我不是母语人士。提前致谢。

最佳答案

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

如果您的下拉列表应该只根据列表 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();
});
});

关于javascript - 有条件的简单下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4521984/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com