Last Updated on April 8, 2021 by Roshan Parihar
In this tutorial, learn how to change image on dropdown select option using jQuery and HTML. The short answer is to use the jQuery show() and hide() to show and hide images on select option.
You have to use the jQuery change() function to get select box option value using jQuery. It works on change of select option and displays related images.
Let’s find out with the examples given below.
How to Change Image on Dropdown Select Option Using jQuery
To use jQuery change image on dropdown select option, you have to first hide the image using the CSS. After that, you have to use the jQuery show() and hide() function to show the image on select of the dropdown option. The hide() hides the <div> that are not selected by the users. See the example given below to find the solution in HTML select image dropdown as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style> .myDiv{ display:none; text-align:center; } .myDiv img{ margin: 0 auto; } .myDiv span{ text-align: center; background: #ffdede; padding: 6px 10px; display: block; width: 100px; border: 1px solid #d47c7c; margin: 8px auto; } #showOne{ color:red; border:1px solid red; padding:10px; } #showTwo{ color:green; border:1px solid green; padding:10px; } #showThree{ color:blue; border:1px solid blue; padding:10px; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('#myselection').on('change', function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<select id="myselection"> <option>Select Option</option> <option value="One">Manager</option> <option value="Two">HR</option> <option value="Three">Developer</option> </select> <div id="showOne" class="myDiv"> <img src="/images/user1.jpg" alt="Manager"/><span>Manager</span> </div> <div id="showTwo" class="myDiv"> <img src="/images/user2.jpg" alt="HR"/><span>HR</span> </div> <div id="showThree" class="myDiv"> <img src="/images/user3.jpg" alt="Developer"/><span>Developer</span> </div> |
Output
Select your option given below to get relevant images.
Manager
HR
Developer
The above example contains the three options in the dropdown select box. Each option has a <div> to show the related select option image in jQuery. You have to select your option to get the related content and change the image. You can also change the number of options and add more options as per your requirement.
The select option shows images by getting the id of the content. When you select the option, it finds the id and matches the content to display.
I hope you like this tutorial and will be able to use the above method easily on your jQuery project.
FAQS on How to Change Image On Dropdown Select Option Using jQuery
1. How to Get jQuery on Select Change Event?
Answer: The jQuery select change event that checks the users if they change the selected option. You can use the jQuery change() function that identified the select option change of dropdown.
It uses the select onchange event and displays the relevant image in the above examples. On selection of the select option, it also changes the select value in jQuery.
2. How to Get Selected Value of Dropdown in jQuery onChange?
Answer: To get the selected value of dropdown onchange, you have to use the jQuery val() on change event of the dropdown. You can use the class or id of the dropdown to access the select box element.
If you want to see the example for this, you can check the example given above.
3. How to Display Image Based on Dropdown Selection in jQuery?
Answer: You have to first place the image inside the <div> element and display it onchange event of the dropdown option. The first thing you have to use is to hide all the images using the jQuery hide(). After that, use the jQuery show() to display the image on dropdown selection.
You can check the example given above to learn this method.
You May Also Like to Read