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!