jQuery select multiple double side

20 febbraio 2010 by

Giovanni

Multiselect (html select with parameter multiple=”multiple”) normally are very difficult to use.
In this modified version of multiselect the select is double (double side select), the right one with the selected element, the left side for insert other element.

mulstiselect2side screenshot

Four new button for:

add the left selected options to the right
add all left options to the right
remove the right selected options
remove all right options

Double click both on left and right options is enabled.

See the plugin Select Multiple Double Side page!

In Jquery | 76 Comments »

76 Comments a “jQuery select multiple double side”

Gav scrive:
1 marzo 2010 alle 01:45
Really cool plugin!!
I was using an existing jQuery plugin however this was really slow but yours works like a dream! It is so much quicker than the previous solution I had found (jQueryUI MultiSelect).

Keep up the good work..
Martin scrive:
5 marzo 2010 alle 17:30
Great plugin… wish it had support for optgroup to make subsets within a box.

- M
Basil scrive:
20 marzo 2010 alle 08:06
Great stuff. However, it would be more naturally to swap left and right list boxes, or at least allow its customization.
Giovanni scrive:
22 marzo 2010 alle 22:02
New parameters selectedPosition (default ‘right’), if you launch:
```
$().ready(function() {
	$('select').multiselect2side({selectedPosition: 'left'});
});
```
Left and right list boxes are swapped.
QuanNH scrive:
24 marzo 2010 alle 05:17
how to get selected value at server ?
Giovanni scrive:
24 marzo 2010 alle 07:27
The values are stored in the original select
Stig scrive:
24 marzo 2010 alle 11:18
Excellent work!!

Any chance for adding “move up/down” feature?

Multiple select order are often essential in addition to the values selected.

Donation on it’s way if implemented
Giovanni scrive:
25 marzo 2010 alle 19:25
Thanks for donation

Version 0.2 with new parameters for “move up/down” feature!
- selectedPosition – position of selected elements – default ‘right’
- moveOptions – show move options – default true
- labelTop – label of top buttom – default ‘Top’
- labelBottom – label of bottom buttom – default ‘Bottom’
- labelUp – label of up buttom – default ‘Up’
- labelDown – label of down buttom – default ‘Down’
Giovanni scrive:
26 marzo 2010 alle 07:56
New Demo!
Giovanni scrive:
2 aprile 2010 alle 08:02
New CSS!
guoyy scrive:
5 aprile 2010 alle 09:09
Hi,It is very quick.
How can I add a new option to a select? The code below does not work.why?Thanks in advance
```
var option = document.createElement("option");
option.text = "china";
option.value = "1";
$("#first")[0].options.add(option);
```

guoyy scrive:
5 aprile 2010 alle 09:23

ok,I have got the answer.

var option = document.createElement(”option”);
option.text = “china”;
option.value = “1″;
$(”#firstSelectms2side__sx”)[0].options.add(option);
//first--->firstSelectms2side__sx

Thank you all the same.
This is really cool and quick.

Giovanni scrive:
6 aprile 2010 alle 17:27
You can add the element in the __sx (left) or __dx (right) select but also in the original one.
mask scrive:
7 aprile 2010 alle 08:52
why do i keep getting: selectedDx.last is not a function from firebug?
Giovanni scrive:
7 aprile 2010 alle 09:21
If you don’t have options selected on right select selectedDx is empty.
Mike scrive:
8 aprile 2010 alle 00:19
Very cool stuff!
Zeki scrive:
11 aprile 2010 alle 23:35
Is it possible to add maxsimum number of items can be transfer to the right side.
Giovanni scrive:
12 aprile 2010 alle 18:06
Ok Zeki! New version with new parameter maxSelected, for you!
Shahid scrive:
13 aprile 2010 alle 18:03
How can we use it with dependent drop down? eg. on change of state drop down it will show the related district.. in php
Giovanni scrive:
13 aprile 2010 alle 19:27
You can use jDoubleSelect
Brian scrive:
14 aprile 2010 alle 18:32
How would implement remove all or clear all from #first?
Giovanni scrive:
14 aprile 2010 alle 19:30
Remove all is the « button.

You can trigger it (if you have only one multiselect) with:
```
$(".RemoveAll").trigger('click');
```

Ikhsan scrive:
14 aprile 2010 alle 20:58

currently I need to vertically centered the moveOptions element, and this is what I did:

$('.ms2side__options').each(function(){
    $(this).css('padding-top', (($(this).prev().children('select').height()/2) - ($(this).height()/2)) + 'px' );
})

btw, great stuff!!

Giovanni scrive:
15 aprile 2010 alle 19:20
Thanks Ikhsan in the new version move and updown options are vertically centered!
Ikhsan scrive:
15 aprile 2010 alle 20:40
Hi Giovanni, I notice that when I group the options with optgroup and then I click the add/remove all option, the real select element (the hidden one, that using optgroup) isn’t updated as I expected, so I change line #170 to:
```
el.find('option').attr("selected","selected");
```
and on line #181 to:
```
el.find('option').attr("selected","");
```
This both works for both (grouped options and ungrouped options).
Nonnenmacher scrive:
16 aprile 2010 alle 12:54
Would be great if you could wrapup an higher level code that would illustrate
how to use it providing a build original select (the ones from your samples) and an helper function inside your multiselect2side jQuery plug-in to grab the result values in a javascript Array.

I don’t see any update to the original select, and you get all values in your ms2side__dx one. So writing the helpers to get some array like [value1,value2]
or [{key:,value:,selected:},...]
would be of great help and make your plug much more isolated form the outside.

Great work !
Giovanni scrive:
16 aprile 2010 alle 14:09
@Ikhsan: Thanks! I modify the code for optgroup!

@Nonnenmacher: if you remove the hide() function on the original select you see that is updated! You may not use other than the originale select values! I tested it on ie, firefox and chrome browsers!
Nonnenmacher scrive:
16 aprile 2010 alle 14:23
@Ikhsan: I didn’t check it, I’ll test, I was just using the Safari inspector and was reading the DOM re-read from Safari. (didn’t test it in firefox).

But anyway verified and author crafted samples on how to use it, with several more detailed jQuery sample code showing how to grab the various left,right elements in the _sx, _dx structures would be usefull for future users.
Giovanni scrive:
17 aprile 2010 alle 07:05
New version 0.6, correct bug with optgroup, thanks to Ikhsan!
guoyy scrive:
24 aprile 2010 alle 05:39
why not replace the change with a click?
as the example shows below:

…….
allSel.click(function()
…….
B_S scrive:
26 aprile 2010 alle 09:11
This is what I’m looking for!

Btw, can I combine this plug-in with collapsible checkbox treeview like this http://www.redcarrot.co.uk/2009/11/11/collapsible-checkbox-tree-jquery-plugin/?

I want to put the collapsible checkbox treeview in the left side.

Can this be done?
Giovanni scrive:
26 aprile 2010 alle 10:42
@guoyy: with change() events are triggered only when options are changed, for me is better!

#B_S: “Collapsible Checkbox Tree jQuery Plugin” use ul, is not easy to adapt to my plugin that use select and options.
Sam scrive:
28 aprile 2010 alle 23:57
This looks good. Would it be possible to add a filter as well – where the user would start typing and the available options would filter on the characters they entered? Also nice to have would be a sort option on the selected list.
Laurent scrive:
30 aprile 2010 alle 14:06
Thanks a lot for this great plug-in.

How would implement the initialization of the selected items in JS (I cannot do it into HTML code.)?

Let’s say i want to select items 2, 3 and 5 on startup ?

Thanks lots,
Laurent.

Giovanni scrive:
4 maggio 2010 alle 08:44

If you want to add option before bind multiselect2side you can use (in a select with name mySelect):

$('[name=mySelect]').append("{option value='99'}Value 99{/option}");

If you want to add option after bind bind multiselect2side you can use:

$('[name=mySelect]').append("{option value='99'}Value 99{/option}");
$('#mySelectms2side__sx').append("{option value='99'}Value 99{/option}");

If your selected element are on right. Or:

$('[name=mySelect]').append("{option value='99'}Value 99{/option}");
$('#mySelectms2side__dx').append("{option value='99'}Value 99{/option}");

If your selected element are on left.

Note: change { with less than sign and } with more than sign.

Peter scrive:
14 maggio 2010 alle 06:06
Great plug-in.

The order of the selected items when I get them at the server does not always match the order I have selected using the up/down/top/bottom buttons. Is this a known bug, or have I implemented your plug-in incorrectly.

Thanks.
Giovanni scrive:
14 maggio 2010 alle 06:11
When you have the problem? I tested it on IE, firefox and chrome and like correct!
Tomas Dermisek scrive:
14 maggio 2010 alle 06:29
Hi,

this is very nice plugin. Have you considered supporting the optgroups too as currently the optgroups just disappear from once the .multiselect2side() is applied. Or is there any config for this?

Thanks!

Tomas
Giovanni scrive:
14 maggio 2010 alle 06:47
Problem supporting optgroups is with order, if on option move up exit from group? I have no idea how to implement both groups that order!
Maurice scrive:
14 maggio 2010 alle 18:07
Hi,

I’ve implemented this plugin, but in IE8 it doesn’t seem to work. The selectboxes are empty and there is a js-error saying

Message: Invalid argument.
Rule: 113
Character: 478
Code: 0
URI: http://code.jquery.com/jquery-1.4.1.min.js

The demo at the jquery website doesn’t work with IE8 either..

Does anyone have a solution?
Giovanni scrive:
15 maggio 2010 alle 14:51
Why don’t use jquery 1.4.2?
Hans scrive:
15 maggio 2010 alle 15:27
Script got someone a small issue too

when i use a select name fields, it throws out

fieldsms2side__dx => post

aswell, kinda bad sometimes.
Giovanni scrive:
15 maggio 2010 alle 18:00
I did not understand!
Hans scrive:
16 maggio 2010 alle 15:55
use firebug, you see your script is sending a variable whats not should be sended.
Hans scrive:
16 maggio 2010 alle 15:56
make a select with name ‘fields’, only fields should be sended.

however ‘fieldsms2side__dx’ is sended aswell with the last variable added.
Hans scrive:
16 maggio 2010 alle 15:59
found another big bug aswell.

when you add a value from the left selects, its added on the right list as last option.

but php array is telling its in array[0] instead of the last one.
Giovanni scrive:
16 maggio 2010 alle 16:14
Select with name *ms2side__dx is added by the plugin, I do not understand where is the problem.
If you want to add a selected element you must add it in the correct position both in original select that in the [orginal-noame]ms2side__dx select.
If you want to add an element non selected you must add it in the correct position both in original select that in the [orginal-noame]ms2side__sx select.
Hans scrive:
16 maggio 2010 alle 16:16
the problem is that i log user requests and i see each time this select.

on submit you should remove this.

but please check the urgent bug, that one is very important to fix for alot of users.

print_r($array); is showing the good selection but wrong ids. last item added is submitted as $array[0], should be last array option.
Giovanni scrive:
16 maggio 2010 alle 17:41
Ok, now I understand!
I added a new version (0.7) with order bug correct!
Giovanni scrive:
18 maggio 2010 alle 20:15
New realese 0.8 with sort button if moveOption enabled!
Gérault thomas scrive:
9 giugno 2010 alle 18:01
hello you have an error in your plugin with the library jquery-1.3.2

124
if (selectedDx.last().val() != selectDx.last().val())
=>
if (selectedDx.filter(”:last”).val() != selectDx.filter(”:last”).val())

line 216
var prev = selectedDx.filter(”:first”).prev();
=>
var prev = selectedDx.filter(”:first”).prev();

line 225
var next = selectedDx.last().next();
=>
var next = selectedDx.filter(”:last”).next();

line 234
var first = selectDx.first();
=>
var first = selectDx.filter(”:first”);

line 243
var last = selectDx.last();
=>
var last = selectDx.filter(”:last”);

comptatible with library 1.4.2
Giovanni scrive:
10 giugno 2010 alle 16:13
It’s ok, last() and first() are added on jquery 1.4!
Brds scrive:
15 giugno 2010 alle 20:53
I can’t get the jQuery select multiple double side working in IE. Not even the one on this page is working. The option lines are displaying in the source code, but they’re not showing up in the boxes for the user to mess around with. Any thoughts?
Chris Miller scrive:
13 luglio 2010 alle 22:28
This is very nice. I added a couple of properties to display text above each list.

At line 25, I inserted:
labelsx: ‘Available’,
labeldx: ‘Selected’,

At line 44, I inserted:
var Header = ((o.labelsx != null) && (o.labeldx != null)) ? “” + o.labelsx + “” + o.labeldx + “” : “”;

And at line 58, I added
Header +
after the line:
((o.selectedPosition != ‘right’ && o.moveOptions) ? divUpDown : “”) +

Basically when labelsx and labelsdx are both not null, labels will be displayed above each select list.
Steve scrive:
14 luglio 2010 alle 16:22
This is fantastic, however I am having trouble getting the selected values to appear in the correct order. They are ordered correctly in the array I am passing as the selected values but they appear on the right side in the order they would appear on the left side. Is there a way I can set the order via jQuery?
Giovanni scrive:
20 luglio 2010 alle 12:58
Two new version, 0.9 add new labels button (left and right label) (thanks to Chris Miller) – 0.10 correct ie8 bug
B-Prod scrive:
1 agosto 2010 alle 17:02
For having the sort behavior working with jQuery 1.3.2, you should add this code after
“(function($)
{”
:

jQuery.fn.sort = function() {
return this.pushStack([].sort.apply(this, arguments), []);
};
Şahin scrive:
10 agosto 2010 alle 19:50
Hi, thank you for the nice plugin. Works fine, i have added search function to your plugin. I couldnt find your mail adress if you mail me back. I can send you what i changed and added and added notes about to do.

Thank you again and best regards.
Giovanni scrive:
10 agosto 2010 alle 21:02
@Şahin: my email address is info @ senamion.com
Hermes scrive:
10 agosto 2010 alle 22:33
Muchas Gracias ! thanks
Tomasso scrive:
16 agosto 2010 alle 13:06
Great plugin!!!

One remark: We shouldn’t be able to move disabled options.

Changed lines 111, 180, 181 and 182:

111: var selectSx = leftSel.children(’:not(:disabled)’);

180: leftSel.children(”:not(:disabled)”).appendTo(rightSel);
181: leftSel.children(”:not(:disabled)”).remove();
182: el.find(’option:not(:disabled)’).attr(”selected”, true);
kofitw scrive:
17 agosto 2010 alle 18:26
hello ,
In the implementation it’s stated relative at your element. I don’t get what element. I used a div and yet it didn’t work.

I want to add this to a modal dialog. I was having some challenges with the html and php till I came across this plugin.

Thanks.
Giovanni scrive:
17 agosto 2010 alle 19:44
With this plugin you must use a select multiple=”multiple”.
The values are returned as select values.
kofitw scrive:
18 agosto 2010 alle 15:55
Thanks a lot for the response.
I tried on a new php page and it worked.

I want to implement it on a legacy system jquery v1.3.2. and it’s not responding.

Any help
Hermes scrive:
20 agosto 2010 alle 21:08
hello! how i can add 1 option?
Hermes scrive:
20 agosto 2010 alle 21:09
hola! cómo puedo añadir una opción? after that the page a load
Hermesf scrive:
20 agosto 2010 alle 22:16
Hi! Many thanks for such an excellent plugin!

Once bound
$ (’# List’). Multiselect2side ((
selectedPosition: ‘left’,
moveOptions: false,
labelsx: ‘* Selected *’
labeldx ‘* Available *’
));

You can add and remove options from the list?
probe with what you mention in comment # 35.
but does nothing.
Since cutting out the list and linked?
is to then create and add a list and link
Giovanni scrive:
23 agosto 2010 alle 09:21
I have updated comment #35 because wordpress delete html tags
Hermesf scrive:
23 agosto 2010 alle 18:15
hi! This plugin allows you to update an item?
SK scrive:
23 agosto 2010 alle 21:05
Thanks for this plugin! It works nicely in IE8 and 7 but there’s some kind of problem in IE6. Error says:

Line 48
Error: Could not set the selected property. Invalid property value.

You can verify the error in IETester (http://www.my-debugbar.com/wiki/IETester/HomePage)
SK scrive:
23 agosto 2010 alle 21:08
There’s also one problem in Opera 10.54:
When there are some items selected, moving one selected item upwards or downwards makes all the selected items being selected.

This can be verified in Demo3.
Martin scrive:
24 agosto 2010 alle 20:57
Doesn’t work in IE6.
Any fix??
Thanks
Giovanni scrive:
26 agosto 2010 alle 06:26
New version 0.11 IE6 compatible.
mike scrive:
26 agosto 2010 alle 21:03
Is there a version of thsi control that works with jquery 1.3.2? we are using it in a CMS and the CMS is on 1.3.2 only.
Andrey scrive:
1 settembre 2010 alle 14:48
Hi, is it possible to get some event when i add or delete option from select list?

Thanks
Giovanni scrive:
6 settembre 2010 alle 09:12
Original select is updated with the new others, then you can just add event to original select

Senamion.com

Senamion:

Categorie:

Archivi:

jQuery select multiple double side

76 Comments a “jQuery select multiple double side”

Write a comment