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:
There are online courses available on the internet which teaches whole data science technology through video tutorials and theory as well. There would be assignments which you have to complete. machine learning and artificial intelligence courses in hyderabad
ReplyDelete