What is jquery
- Jquery is a small, light-weight and fast javascript library. It’s cross-platform and supports different types of browsers.
- It’s also referred as Write less do more? Because it takes a lot of common tasks that needs many lines of javascript code to accomplish, and binds them into methods which will be called with a single line of code whenever needed.
- It’s also very useful to simplify a lot of the complicated things from javascript, like AJAX calls and DOM manipulation.
How to show and hide div elements based on dropdown selection in jQuery
Answer: Use the jQuery change() method
The following example will demonstrate you ways to show and hide div elements based on the dropdown selection or selected option in a select box using the jQuery change() method together with the show() and hide() methods. The div boxes in this example are hidden by default using the CSS display property which value is set to none.
Example
[pastacode lang=”javascript” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%3Cmeta%20charset%3D%22utf-8%22%3E%0A%3Ctitle%3EjQuery%20Show%20Hide%20Elements%20Using%20Select%20Box%3C%2Ftitle%3E%0A%3Cstyle%3E%0A%20%20%20%20.box%7B%0A%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20padding%3A%2020px%3B%0A%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.red%7B%20background%3A%20%23ff0000%3B%20%7D%0A%20%20%20%20.green%7B%20background%3A%20%23228B22%3B%20%7D%0A%20%20%20%20.blue%7B%20background%3A%20%230000ff%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.5.1.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%24(document).ready(function()%7B%0A%20%20%20%20%24(%22select%22).change(function()%7B%0A%20%20%20%20%20%20%20%20%24(this).find(%22option%3Aselected%22).each(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20optionValue%20%3D%20%24(this).attr(%22value%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(optionValue)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22.box%22).not(%22.%22%20%2B%20optionValue).hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22.%22%20%2B%20optionValue).show()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22.box%22).hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D).change()%3B%0A%7D)%3B%0A%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cselect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%3ESelect%20Color%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22Black%22%3EBlack%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22White%22%3EWhite%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22Orange%22%3EOrange%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22Black%20box%22%3EYou%20have%20selected%20%3Cstrong%3Ered%20option%3C%2Fstrong%3E%20so%20i%20am%20here%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22White%20box%22%3EYou%20have%20selected%20%3Cstrong%3Egreen%20option%3C%2Fstrong%3E%20so%20i%20am%20here%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22Orange%20box%22%3EYou%20have%20selected%20%3Cstrong%3Eblue%20option%3C%2Fstrong%3E%20so%20i%20am%20here%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]
Output
