Labels

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.

view.html
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('.SelectRole').hide();
            $('#Role').change(function () {
                $('.SelectRole').hide();
                $('#' + $(this).val()).show();
            });
        });
    </script>
</head>
<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>
</select>
<div id="Teacher" class="SelectRole">
    <div>You have selected teacher</div>
</div>
<div id="Parent" class="SelectRole">You have selected parent
</div>
<div id="Student" class="SelectRole">
    <div>You have selected student</div>
</div>
</html>
Output:


10 comments:

  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
    online

    ReplyDelete
  2. Thanks for the wonderful information. It's very use full for us. Digital Signature Certificate

    ReplyDelete
  3. Thank you so much for providing such useful content. Digital Signature Certificate

    ReplyDelete
  4. programming is harder than reading articles So I recommend reading the article about academic proofreading service in which there is a lot of useful information!

    ReplyDelete
  5. if you want to be smart and not program, then read the articles So I recommend reading the article about academic proofreading service in which there is a lot of useful information!

    ReplyDelete
  6. if you do not like programming, but you want to do something useful, then read the articles So I recommend reading the article about academic proofreading service in which there is a lot of useful information!

    ReplyDelete
  7. What to do if programming is not suitable for you? read articles! So I recommend reading the article about academic proofreading service in which there is a lot of useful information!

    ReplyDelete
  8. Thanks for sharing such an awesome post. This is very informative and helpful, share more post like. Apply Class 3 Digital Signature Certificate

    ReplyDelete

More Posts

FOLLOW