Multi-select dropdowns in Forms

Design help General
1

Hey Guys,

In one of my forms, I am using a dropdown widget. I am having two problems (both on this page: Webflow - Flexiple Jobs Product)

  1. Primary skillset field: Firstly, I want to add a checkbox inside the dropdown. This forum link suggests that I can just drag and drop the checkbox widget inside the dropdown widget. That’s not working.

  2. Secondary skillset field: Secondly, I want to give the user a multi-select option as well. I did see “Allow Multiple” option in the settings plan. But immediately, the dropdown expands and lists all the options. I plan to have some 20 options in the dropdown, so an expanded view clearly doesn’t work. Additionally, pressing Cmd and selecting multiple options is not intuitive at all (the need of checkbox mentioned in 1. is even higher here).

I feel a multi-select dropdown like the image below, should be a standard isn’t it?
Dropdown

Please let me know!

1 Like
2

Hey Karthik,

I have exactly the same problems. Do you have any solution, please?

Thanks a lot!

3

what is your share link for your site. Without the actual share link it is hard to see what the problem is.

as far as a check box in a dropdown no, they are two different types of inputs. Multi select will allow multiple selections from the dropdown list.

keep in mind only form elements can be placed in forms natively because most are all types of inputs.

If you have a specific question add your share link.

4

Jeremy, thank you for your answer.

I don’t have a link yet, because it is a future project in which I need three optional multi-selection dropdown lists in a form for different types of activities (sports, evening, leisure).

So I’m currently looking for possibilities - is it possible natively or I need some integration?

Thank you for your patience, I am a beginner in Webflow.

5

I’m pretty sure from your description it can easily be done. You can put 3 dropdowns in a form. There is a box to check to allow multi-selection if you want to allow multiple options for a drop down.

What might be confusing is a checkbox and a multi-dropdown do the same thing, well kind of. In a form they are both inputs, so a checkbox can’t be put in a dropdown in a form. Nor is there a reason to to. Hopefully that clears things up, but yes absolutely you can natively use a multi-selection dropdown in a form.

6

Hi there! I am been working on a similar problem. I create a select field (allow mutiple) inside a dropdown. And then I have to add some custom code to the ability to have multi selected field that works better than the native.

Inside head tag, I put a JQuery CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

And before tag this:

<script>
    $('option').mousedown(function(e) {
        e.preventDefault();
        var originalScrollTop = $(this).parent().scrollTop();
        console.log(originalScrollTop);
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        var self = this;
        $(this).parent().focus();
        setTimeout(function() {
            $(self).parent().scrollTop(originalScrollTop);
        }, 0);
        
        return false;
    });
    </script>

Example:
https://multiselectcheckbox.webflow.io/

I hope it helps you.

3 Likes
7

Hi Richard,
Assuming “Sign me up for the following” is the field we are talking about, this is exactly what I’m looking for.
However, I did not understand where and how did you put the:

<script>
    $('option').mousedown(function(e) {
        e.preventDefault();
        var originalScrollTop = $(this).parent().scrollTop();
        console.log(originalScrollTop);
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        var self = this;
        $(this).parent().focus();
        setTimeout(function() {
            $(self).parent().scrollTop(originalScrollTop);
        }, 0);
        
        return false;
    });
    </script>

Thanks
1 Like
8

Thanks for this, just helped me fix a problem

9

Welldone SIR Richaarrd.

10

@Richard_Reynolds Thanks for this.

Any chance you know how to make checkboxes have values?