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>
Happy holidays!