php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Thursday, January 18, 2018

How to Show and Hide Content Based on Dropdown Selection in JQuery

We mainly use Jquery #id selector, Jquery .class selector and Jquery change () method to show and hide div element based on dropdown selection.

The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element.
Note: The id attribute must be unique within a document.

The .class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements.

The change () method triggers the change event, or attaches a function to run when a change event occurs. The change event occurs when the value of an element has been changed when an option is selected in select menus.
The following example will demonstrate you how to show and hide div elements based on drop down selection.

    <script src=""></script>
        $(function () {
            $('#Role').change(function () {
                $('#' + $(this).val()).show();
<select id="Role" name="Role" class="form-control">
    <option value="">Select</option>
    <option value="Teacher">Teacher</option>
    <option value="Parent"> Parent</option>
    <option value="Student">Student</option>
<div id="Teacher" class="SelectRole">
    <div>You have selected teacher</div>
<div id="Parent" class="SelectRole">You have selected parent
<div id="Student" class="SelectRole">
    <div>You have selected student</div>


  1. I am essentially satisfied with your great work.You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to perusing your following post


More Posts