Display images under Drpdown list

  • maxximus
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 19
  • Thank you received: 0

maxximus created the topic: Display images under Drpdown list

Hello,

how can I associate dropdown entries with images/photos? E.g. if an entry is selected in the dropdown list, the corresponding photo/image is displayed below.

Thanks for your help
Greetings
Toni
#239208
  • Posts: 3124
  • Karma: 104
  • Thank you received: 409

mihaela replied the topic: Display images under Drpdown list

Hello,

Here is how you can make it work as you want.

Go to the Advanced properties of the select list element and in the Actionscript section set Type to Custom and Action to Change and in the code area that appears below put the following code:
function ff_SelectListName_action(element, action)
{
    if( element.value == "value1" ) {
        jQuery("#myimage").remove();
        jQuery("#ff_elem14515").parent().parent().append('<img id="myimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png" alt="Smiley" width="100" height="100" border="0" />');

    }
    else if( element.value == "value2" ) {
        jQuery("#myimage").remove();
        jQuery("#ff_elem14515").parent().parent().append('<img id="myimage" src="https://image.shutterstock.com/image-photo/butterfly-morpho-didius-260nw-600974249.jpg" alt="Butterfly" width="100" height="100" border="0" />');

    }
    else {
        jQuery("#myimage").remove();
    }
 
} // ff_SelectListName_action
NOTE: In the code above replace "SelectListName" with the Name of the select list in your form.
Also, you have to replace "value1" and "value2" with the values of options in that select list. Add an "else if" statement like that for each select list option.

Also, adjust the "src" attribute of the image to what you wish to display.

Let me know whether this works as you wanted.

Regards,

Mihaela
#239212
  • maxximus
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 19
  • Thank you received: 0

maxximus replied the topic: Display images under Drpdown list

Hello Mihaela,

thank you for your answer.

I have inserted the code as you indicated and changed "SelectListName". However, the images are not displayed.

What have I done wrong?

Thank you

Regards,

Toni
#239266
  • Posts: 3124
  • Karma: 104
  • Thank you received: 409

mihaela replied the topic: Display images under Drpdown list

Hello,

I forgot to note that you also have to replace the ff_elem14515 with the correct ID of the select list element in your form.

You can retrieve the ID by previewing the form and inspecting the element.

Let me know whether it works after you adjust the ID.

Regards,

Mihaela
#239276
  • maxximus
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 19
  • Thank you received: 0

maxximus replied the topic: Display images under Drpdown list

Hello Mihaela,

Many thanks. It works just fine.

Regards
Toni

Regards
Toni
#239289
  • Posts: 3124
  • Karma: 104
  • Thank you received: 409

mihaela replied the topic: Display images under Drpdown list

Great!

I'm glad I have helped.

Regards,

Mihaela
#239292
Moderators: ForumSupporttomeperica
Time to create page: 0.077 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here