Help to make my form select/dropdown pre-selectable! 🤖

Hello, guys! Please help me to write code to make my dropdown pre-selected. Here is my website on Webflow: Webflow - Getzing
And here is published one: https://www.getzing.pp.ua/
There are three cards offering three different plans. When you click one of these buttons the pop-up form appears with dropdown, which contains three options with text — one for each plan: “First option”, “Second option”, “Third option”. How can I make the dropdown to be pre-selected in popup form after pressing one of these three buttons (corresponding to each plan)? I used Finsweet attributes to bond the form select (which is hidden) with stylized dropdown. :space_invader:

In the Webflow Designer, assign unique IDs to each option in your dropdown. For example, you can use IDs like firstOption, secondOption, and thirdOption.
Go to the page settings and add a custom code embed. This code will contain the JavaScript logic to pre-select the dropdown based on the plan selected.
Write a script to be embedded in the custom code. Below is a sample script assuming you have jQuery available (Webflow uses it by default). If not, you may need to include jQuery in your project.

```javascript
<script>
    $(document).ready(function () {
        $('.popup-button').on('click', function () {
            var selectedPlan = $(this).data('plan');
            $('#dropdown').val(selectedPlan).change();
        });
    });
</script>
```
  • In this example, .popup-button is the class assigned to your plan buttons, and data-plan is an attribute that holds the corresponding dropdown option ID.

Thank you for your reply! Unfortunately, I can’t assign IDs to the options in dropdown, because it has only one option with a link, which contains Finsweet attributes to auto generate options from the hidden select options after the site is published. I guess I need the code which allows to find these options after publishing and make one of them pre-selected depending on which button was pressed. I’m starting to think that perhabs it would be better to create the custom select from scratch with JS.

Hello Denis, have you managed to find a solution for this? I’m facing the same difficulty in implementing this functionality. Additionally, the integration of finsweet attributes for binding CMS items to a select field has me uncertain about whether it simplifies matters or poses a potential obstacle to any solution that may be found.

Hello! I desided to give up Finsweet implementation and just wrote my custom select using hidden input bonded to drop-down, which could be fully customizable. Here is my code both in vanilla JS and jQuery on GitHub: https://github.com/denkhr/custom-pre-select
There are also 3 buttons there for pre-selection options in this custom select.