Dleightful Dleightful - 4 months ago 5x
Javascript Question

Display Item from Dropdown of Options with JavaScript or Jquery

I have constructed an HTML page along with some CSS. I have placed a button that provides a dropdown of several meetings. Each time you click on each one of the meetingsin this dropdown, I'd like for a headline and a set of text to appear that provide info on what happened at this meeting. The following is the code


<!DOCTYPE html>
<title>Meeting Types</title>
#meetings div {
display: none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<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>


<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 id="meeting-b">
<h2>Meeting B</h2>
<p>This meeting occured in district 34 with members of 54 presiding.</p>

<div id="meeting-c">
<h2>Meeting C</h2>
<p>This meeting occured in district 4 with members of district 45 presiding with input.</p>


I am trying to construct JavaScript or Jquery so that when I select a meeting from the "Choose a Meeting Dropdown" below I see the heading (what's in between the
tag) and what I wrote in between the
tags. Additionally, when I click on the button "Show All Meeting", then all the information appears at once (i.e. a heading of Meeting A and the corresponding paragraph describing what happened in it, the heading for Meeting B and what happened in it, the heading for Meeting C, and what happened in it.

I have used several stackoverflow threads to attempt to answer this question. One such thread led me here. And still another led me here. The most useful thing has been this w3school lesson which is very similar to what I'm trying to accomplish but doesn't quite permit me to display the material within the H2 nodes and p nodes within my original file. I think jquery may be the most effective way to do this but Javascript might be applicable as well.

hsh hsh

With some jquery you can achieve this,you can use jquery hide and show methods to hide and show corresponding divs and change event for tracking drop down selection change:



    var valueSelected = this.value;
    $("#" + valueSelected).show();

I also added .my-meeting class to meeting divs for selecting and hiding all divs.

I think you are looking for something like This