使用JavaScript或Jquery的选项下拉菜单显示项目
我已经构建了一个HTML页面以及一些CSS。我已经放置了一个按钮,提供多个会议的下拉菜单。每次您在此下拉列表中点击每个会议时,我都希望看到标题和一组文字,以提供此次会议中发生的事情的相关信息。以下是代码使用JavaScript或Jquery的选项下拉菜单显示项目
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的,这样,当我选择“选择会议下拉”开会下面我看到标题(什么是在在<h2>
标签之间)和我在<p>
标签之间写的内容。此外,当我点击“显示所有会议”按钮时,所有信息立即出现(即会议A的标题和相应的段落描述发生的事情,会议B的标题以及发生的事情,前往大会,C,并发生了什么吧。
我用几个计算器线程试图回答这个问题。其中一个线程使我here。还有一个促使我here,最有用的东西一直是这个w3school lesson这与我正在尝试完成的内容非常相似,但并不完全允许我在原始文件中的H2节点和P节点内显示材质。我认为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();
});
我还添加了.my-meeting
类会议的div用于选择和隐藏所有div。
我认为你正在寻找的东西像This
你需要的电平变化dropdown
功能,以显示各自的会议。为每个会议分配一个class
div
,以便通过隐藏divs
隐藏类可以访问它。
在页面加载隐藏所有divs
,当用户从下拉菜单中选择一个值分别显示div
。
也会使你的按钮type="button
因为目前你button
是submitting
的page
下面是本
HTML
<div id="meetings">
<select id="gatherings" onchange="ShowSelectedMeeting()">
<option value="" selected="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>
<p><button type="button" id="showAll" onclick="ShowAll()">Show All Meetings</button></p>
<div id="meeting-a" class="meeting">
<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" class="meeting">
<h2>Meeting B</h2>
<p>This meeting occured in district 34 with members of 54 presiding.</p>
</div>
<div id="meeting-c" class="meeting">
<h2>Meeting C</h2>
<p>This meeting occured in district 4 with members of district 45 presiding with input.</p>
</div>
</div>
一个完整的解决方案的Javascript
<script>
$(function() {
$('.meeting').hide();
});
function ShowSelectedMeeting()
{
var Id = $("#gatherings").val();
$('.meeting').hide();//To hide other meeting div so only one show at a time
$("#"+Id).show();
}
function ShowAll()
{
$('.meeting').show();
}
</script>
使用JavaScript:
var slt = document.getElementById("gatherings");
var elems = document.getElementsByClassName("meeting");
slt.addEventListener("change", function() {
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
var elemId = slt.options[slt.selectedIndex].value;
document.getElementById(elemId).style.display = "block";
});