Streaming live at 10am (PST)

Change dropdown bg image if a form input is selected (radio or checkbox) inside

Read-only link

Hi, so I’m essentially trying to give a visual indication to a user that their selection inside of a dropdown has been registered even once the dropdown is closed. Right now it just stays at the basic placeholder label (‘select one’ or ‘select multiple’). Selections on this site are radio buttons (for single choice) or checkboxes (for multiple-choice).

Webflow doesn’t make this easy and I (and my client) think it is a rather large UX problem, so I’m trying to figure out a custom code solution.

The logic that I’ve come up with is: If a user has selected an item (radio or checkbox) within a dropdown, that dropdown’s background image will change.

The default image is a dropdown arrow and it would change to a checkmark if an option or options inside is/are selected.

I am not fluent in javascript at all but figure this is probably the best way to get this idea functioning. I perused various stack overflow threads and sort of hacked the following code together - but it definitely doesn’t work. I’m hoping someone will be able to either clean up my hacky code so that it works or can help me with a different solution if I am way off base.

Check out the contact page’s form and you’ll see the ‘entity size’ dropdown. The contact page is the only one I’ve added the custom code to so far (there’s a number of forms with dropdowns on this website and some forms even have multiple dropdowns within them).

<!--if a child radio button is selected then change the background image of the parent dropdown element -->
<script>
var radiosParent = document.getElementsByClass('b-form__dropdown');
var radios = radiosParent.getElementsByTagName('input')
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        document.getElementsByClass('b-form__dropdown').style.backgroundImage="url(https://uploads-ssl.webflow.com/5fd50b727684da7fd9ba97bd/5fdfdaece66c0885d2676585_subdropdown%20arrow.svg)";
    value = radios[i].value;       
    }
}

</script>

Read-only link

Hi @theecarls.

I don’t know if this would be an option, but I learned of select2 js from watching a livestream by Pixel Geek. I’ve used it a few times with multi-select drop-downs. When you select multiple items, they then appear in a field, event after the drop-down is closed so you have visual cues.

When I’ve used this code, I’ve had it pull my multi-select options from a CMS collection.

Pixel Geek Stream with cloneable: Adding data into a Webflow Collection Multi-Reference field using Zapier - Stream clip - YouTube

You are a rockstar, Colleen! I appreciate this so much. Nelson is always a rockstar too of course. :slight_smile: Happy holidays!

1 Like

Same to you @theecarls!

Hello there,

I came across your post as I am desperatley trying to make Select2 Work in Webflow. i wonder if you can help me?

I am testing it with simple static data, but I cannot make it work inside a Webflow form (I place it there as an HTML embed).
On the contrary, outside Weblflow, it works great.

What it happens is that HTML select code behaves like a normal listbox, without picking up the Jquery functionalities at all, within Webflow.

I have of course placed in the of the Webflow page the required links to include select2.min.js and select2.min.css (as explained here: Installation | Select2 - The jQuery replacement for select boxes).

And of course I have placed in the bottom of the page the Jquery code to instantiate it:

I cannot identify which conflict does not make it work within Webflow.

I also saved the published Webflow page as HTML to make some experiments: I have tried to use the Jquery version of Webflow, or the JQuery version suggested by Select2, or BOTH. Again, it does not work.
On the contrary, if I do these same 3 tests in a simple non Webflow HTML page, it works regardless of the Jquery versions.

Can you kindly help me… PLEASE?

The read only link to my simple Webflow testing page:

https://preview.webflow.com/preview/cs3?utm_medium=preview_link&utm_source=designer&utm_content=cs3&preview=564002b3fd894da3806e9ec0d109e127&pageId=6017d975c307b457e34d41ef&mode=preview

Thank you,
Mauro

Hi Mauro, did you clone Nelson’s example project? That’s the best way to get started. meh-978a33 - Webflow

Thank you Carly,

I received help earlier on and my combo now works :slight_smile:

Cheers