Multi Select With Updating Text
A multi select dropdown that updates its toggle text in real time as users make selections. Built as an add-on to Finsweet's Custom Select, it shows selected options in the toggle separated by commas, truncating with "..." once the display hits 32 characters.
How it works:
A JavaScript snippet listens for clicks on each dropdown option. When a user selects or deselects an item, the script toggles the corresponding <option> element's selected state and updates the toggle div text dynamically. If nothing is selected, the placeholder text is restored. If the combined label text exceeds the character limit, it truncates cleanly.
How to set it up:
- Clone the project and copy the 'COPY ME' element into your own project.
- Copy the Finsweet Custom Select script from the cloned project's page settings into your
<head>page custom code. - Add the JavaScript from the cloned project's page settings into your before
</body>page custom code. - Publish and test.
The placeholder text and character limit are hardcoded in the script. To change them, edit the maxLength value and the placeholder string at the top of the JavaScript.
Fancy a Free Quote?
Got a crazy idea? We’re all ears. Reach out, share your story, and let’s make some magic together. Click below to get your free quote.
