Mutli-select dropdown box

[mudskipper]

Done loads of foogling.

Basically I've got a multi-select select box.

<select id="mySelect" multiple="multiple">
<option>Here</option>
<option>There</option>
<option>Everywhere</option>
<option>AndyW</option>
</select>

I'm trying to find a way to render it as a regular dropdown, but retaining the ctrl + shift multiple select functionality.

There's a zillion jquery solutions, but they all seem to add checkboxes to select multiple values - my users want to be able to select a range with the shift key, as well as individual non sequential values (like the standard component) but want it to look like a dropdown.

Has anyone come across something that will do this?

[Bunk]

Given the functionality you want to have, I'd be inclined to start off with the multiple select like you have, and add some JS and CSS to make it look like a normal dropdown before it's clicked, then show the usual multi-select once it's been opened.

As usual there are reasons it doesn't normally work like this. Eg. what should it show when it's closed and multiple options are selected?

[TheFaQQer]

Have you tried this?

[mudskipper]

Given the functionality you want to have, I'd be inclined to start off with the multiple select like you have, and add some JS and CSS to make it look like a normal dropdown before it's clicked, then show the usual multi-select once it's been opened.

As usual there are reasons it doesn't normally work like this. Eg. what should it show when it's closed and multiple options are selected?

Well that's what the nice jquery ones do for you.

The one I've currently got implemented is

Multiple Select

but it does the checkbox thing.

I'm wondering if I can double up with something like

Jquery Range Selector

to get the best of both worlds. Will have a play this evening...

[mudskipper]

Have you tried this?

Hehe, hoping he'll be along shortly to do my work for me

[Bunk]

I meant something like this: jsFiddle.

It's just changing the height of the multi-select on click but it means that the native behaviour is still there. You could also add a fake dropdown for them to click on, which would show one of the selected options and would look better.

[mudskipper]

I meant something like this: jsFiddle.

It's just changing the height of the multi-select on click but it means that the native behaviour is still there. You could also add a fake dropdown for them to click on, which would show one of the selected options and would look better.

Yep, that's pretty neat. Thanks!

[Bunk]

Yep, that's pretty neat. Thanks!

Now don't forget to over-engineer it and add some fancy swishy animations. You can easily spend a few days on 5 minutes work

[hyperD]

Now don't forget to over-engineer it and add some fancy swishy animations. You can easily spend a few days on 5 minutes work

That's nice Bunk! I'll watch mudskipper's wonderful creation and grab it for future once I've bribed her with a tea!

[mudskipper]

Works quite nicely with a textbox - especially if I add a dropdown image doobrie.

Just got to work out how to show the listbox without moving the other content - I hate this CSS stuff!

Edit fiddle - JSFiddle


Edit: still would prefer a nice 'out the box' solution if anyone's come across one!