CODEWITHSUNDEEP
javascripthtml
Dleightful
Dleightful

Reputation: 107

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

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>

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 <h2> tag) and what I wrote in between the <p> 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.

Upvotes: 0

Views: 2900

Answers (4)

user534544
user534544

Reputation: 11

        <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>
$(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(); }

Upvotes: 0

Văn Quyết
Văn Quyết

Reputation: 2538

Using 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";
});

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

You need onchange function of dropdown to show respective meeting. Assign a class to every meeting div so it can be accessed through class for showing hiding divs.

On page load hide all divs and when user selects a value from dropdown show respective div.

Also make your button type="button because currently your button is submitting the page Below is a complete solution for this

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>

Upvotes: 1

hsh
hsh

Reputation: 1855

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:

$("#showAll").click(function(){
   $(".my-meeting").show();
});

$("#gatherings").change(function(){

    var valueSelected = this.value;
    $(".my-meeting").hide();
    $("#" + 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

Upvotes: 2

Related Questions