我已经构建了一个 HTML 页面以及一些 CSS。我放置了一个按钮，提供多个 session 的下拉菜单。每次您单击此下拉列表中的每个 session 时，我都希望显示一个标题和一组文本，以提供有关本次 session 上发生的情况的信息。下面是代码
HTML
<!DOCTYPE html>
<html>
<head>
<title>Meeting Types</title>
<style>
#meetings div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<h1>Meetings Types</h1>
<div id="meetings">
<form id="myForm">
<select id="gatherings">
<option value="" selected>Choose a Meeting</option>
<option value="meeting-a">Meeting A</option>
<option value="meeting-b">Meeting B</option>
<option value="meeting-c">Meeting C</option>
</select>
</form>
<p><button id="showAll">Show All Meetings</button></p>
<div id="meeting-a">
<h2>Meeting A</h2>
<p>This meeting occured in district 10 with members of district of 12 with lots of input from
many different individuals.</p>
</div>
<div id="meeting-b">
<h2>Meeting B</h2>
<p>This meeting occured in district 34 with members of 54 presiding.</p>
</div>
<div id="meeting-c">
<h2>Meeting C</h2>
<p>This meeting occured in district 4 with members of district 45 presiding with input.</p>
</div>
</div>
</body>
</html>
我正在尝试构建 JavaScript 或 Jquery，以便当我从下面的“选择 session 下拉列表”中选择 session 时，我会看到标题(<h2> 标记之间的内容)以及我在 <p> 标记之间编写的内容。此外，当我单击“显示所有 session ”按钮时，所有信息都会立即显示(即 session A 的标题和描述其中发生的情况的相应段落、 session B 的标题及其中发生的情况、前往 session C，以及其中发生的事情。
我使用了多个 stackoverflow 线程来尝试回答这个问题。一个这样的线程引导我 here 。还有另一个引导我 here 。最有用的是这个 w3school lesson，它与我想要完成的非常相似，但不太允许我在原始文件中显示 H2 节点和 p 节点中的 Material 。我认为 jquery 可能是最有效的方法，但 Javascript 也可能适用。
最佳答案
使用一些jquery你可以实现这一点，你可以使用jquery hide 和 show 方法来隐藏和显示相应的div并更改事件以跟踪下拉选择的更改:
$("#showAll").click(function(){
$(".my-meeting").show();
});
$("#gatherings").change(function(){
var valueSelected = this.value;
$(".my-meeting").hide();
$("#" + valueSelected).show();
});
我还在 session div 中添加了 .my-meeting 类，用于选择和隐藏所有 div。
我认为您正在寻找类似 This 的内容
关于javascript - 使用 JavaScript 或 Jquery 显示选项下拉列表中的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37894378/