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.

Five optional move button:

sort – sort options
top – move to top selected options
up – move up selected options
down – move down selected options
bottom – move to bottom selected options

See the plugin Select Multiple Double Side page!

In Jquery | 139 Comments »

139 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
wut scrive:
10 settembre 2010 alle 09:46
How can i update your component’s content when i populated original select using json?
.trigger(”change”) doesn’t work.
wut scrive:
10 settembre 2010 alle 10:33
Wow) i figured out – how to do it

$.post( url, array, function( data ){
if( $(’.ms2side__div’) ){
$(’.ms2side__div’).remove();
$(’#'+element).multiselect2side({
selectedPosition: ‘left’,
moveOptions: false,
labelsx: ‘Active’,
labeldx: ‘Available’
});
}
});
Margie Roginski scrive:
17 settembre 2010 alle 01:29
Hi,

I am trying to use your plugin but keep getting the error selectedDx.last is not a function. It looks like last() is in jquery 1.4, but not jquery 1.3.2 and I am still on 1.3.2. I can’t seem to find a download link for your older versions, could you tell me how to download the last version that supports jquery 1.3.2? Thank you – this seems like a very nice plug in.

Margie
Margie Roginski scrive:
17 settembre 2010 alle 21:55
I have solved this problem with selectedDx.last being not defined as a function. If you are using jquery 1.3.2, you can just put the following at the top of jquery.multiselect2side.js and it will define the necessary jquery 1.4 functions that are missing in 1.3.2:

jQuery.fn.extend({

eq: function( i ) {
return i === -1 ?
this.slice( i ) :
this.slice( i, +i + 1 );
},

first: function() {
return this.eq( 0 );
},

last: function() {
return this.eq( -1 );
}
});
Giovanni scrive:
20 settembre 2010 alle 07:28
Thank you very much, Margie!
gpassero scrive:
7 ottobre 2010 alle 15:43
I’ve the same problem as Nonnenmacher was reporting… how do I get the results from the control? $(’#myList’ :selected) is only returning 1 value, not the 5 that were pushed to the right side. It seems like the original select is not being updated with the results of the user changes. Can you give a jquery example? Should I try to query the options that are left under #myListms2side__dx ?
Thankyou!
Giovanni scrive:
8 ottobre 2010 alle 06:28
Selected elements must be present in the original select. I tested also in Safari.
You use version 0.11?
John scrive:
27 ottobre 2010 alle 23:49
If I disable the underlying select element shouldn’t the buttons be disabled?
nervino scrive:
3 novembre 2010 alle 18:56
Great plugin!

Is it possible to display a single multiselect with the sort buttons?

Thank you!
nervino scrive:
3 novembre 2010 alle 23:58
Is it possible to have only one multiselect (single, not 2 multiselect side by side) with the sort buttons?

thank you
pablo scrive:
11 novembre 2010 alle 13:26
I’d like to add an “option” in the list.

For that I use
```
 function	update_select(newvalue)
{
	document.getElementById('select-2').options[document.getElementById('select-2').length] = new Option(newvalue, newvalue);
}
```
My new option comes well in the select but not displayed

Someone has an idea or another method to add options?

thx
hood scrive:
17 novembre 2010 alle 11:50
Great work you are sharing, thanks you so much.

I also discovered a problem with Opera (I am using 10.63), and only in Opera.
When moving between Available and Selected column, there odd to have a few Availables got automatically Selected, even though it shouldn’t have.
Then if submitted, the highlighted (regardless if it is Selected or Available) will be POSTed.
Hope someone can figure out what when wrong.

Also, with regarding post #35, I find that the first line
only works ID, versus “name=mySelect” in the original code, for example:
```
$('#mySelect').append("{option value='99' SELECTED}Value 99{/option}");
$('#mySelectms2side__sx').append("{option value='99' SELECTED}Value 99{/option}");
```
Note: change { with less than sign and } with more than sign.

Thanks again for the hardwork.
Cheers.
Giovanni scrive:
18 novembre 2010 alle 13:15
I tried to add .removeAttr(”selected”); after clone of selected elements:
```
// MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
$(this).find("option:selected").clone().appendTo(rightSel).removeAttr("selected");
```
Is this solution right for you?
If ok I will update the plugin.
John scrive:
18 novembre 2010 alle 21:38
I am wondering if there is some way to configure this so that when items are put back in the original select, they will be sorted in order, and not be placed at the bottom of the list…
hood scrive:
19 novembre 2010 alle 06:37
Hi Giovanni,

Thanks for the quick reply.
The fix works for the display side of things in Opera. But when posted, always a few options missed out, and which values miss appeared to be random.

Cheers.
yustme scrive:
19 novembre 2010 alle 23:34
This plugin is very nice, but it has a bad behavior,
The plugin affect ALL select elements on the page
I think it should affect
ONLY the specified ones

yust my opinion, thanks
Giovanni scrive:
20 novembre 2010 alle 15:14
@Yustme:
- for all select in a page: $(’select’).multiselect2side();
- for the select with id idMySelect: $(’#idMySelect’).multiselect2side();
- for the select with name nameMySelect:
  $(’[name=nameMySelect]‘).multiselect2side();
- …
Giovanni scrive:
21 novembre 2010 alle 17:50
@hood: new version, fix opera bug.
Now in the demo a result example.
hood scrive:
22 novembre 2010 alle 05:23
Hi Giovanni,

Using the v0.12 js code. I’ve setup a very simple PHP submit form.
If you use Opera, swap values between available and selected columns a few times, then submit, it will shows usually only a max of 3 options value can be submitted.
May be its Opera’s javascript engine’s problem, since its not a problem for Firefox and IE.

http://hoodie.110mb.com/

Many thanks.
Cheers.
Yustme scrive:
22 novembre 2010 alle 06:44
@Giovanni
Thanks so much
but the problem was an older version
now after changing to the actual one
it works at its best
thanks again

a little suggestion for a future version is
the handling of optgroup for Available options
like the jdoubleselect plugin
yust my opinion, thanks
Giovanni scrive:
22 novembre 2010 alle 10:39
@hood: I have tested your page with opera 10.63. It works!
hood scrive:
25 novembre 2010 alle 07:16
Hi Giovanni,

Sorry to trouble you again.
I’ve made a screen capture movie on my submitted results.
http://www.youtube.com/watch?v=4sdXlsptY5g

Its doesn’t work at my side…

Very strange.
Thanks very much.
Cheers.
Pietro scrive:
7 dicembre 2010 alle 13:47
Hi Giovanni, this is really a great script!!!!

I’m trying to pre-populate the right select because I’m editing a form, so I append the values with the code of #35 post. It works but in the post variable – in php – I don’t have the pre-populated values…

Do I need to do something more than in the #35 post?
Thank you very much!
Pietro scrive:
7 dicembre 2010 alle 20:06
I solved adding “selected=’true’” while appending to the first select.
Wonderful script! Thanx for sharing!!!!!
walkalong2gether scrive:
20 dicembre 2010 alle 19:21
Can please anyone show how to extract selected values, I would appreciate a line of code that works. Thank you in Advance
Giovanni scrive:
21 dicembre 2010 alle 10:56
Selected values are in the original select

Paul Vernon scrive:
20 gennaio 2011 alle 17:49

Greetings. I like your plugin, thanks. I have found a small bug when you open the multiselect in a thickbox such as we do. Here is a diff to fix the Select All button from breaking:

Index: jquery.multiselect2side.js
===================================================================
--- jquery.multiselect2side.js	(revision 506)
+++ jquery.multiselect2side.js	(working copy)
@@ -59,7 +59,7 @@
 				"" +
 						((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
 					"" +
-						(o.labelsx ? ("" + o.labelsx + "") : "") +
+						(o.labelsx ? ("" + o.labelsx + "") : "") +
 						"" +
 					"" +
 					"" +
@@ -77,7 +77,7 @@
 						) +
 					"" +
 					"" +
-						(o.labeldx ? ("" + o.labeldx + "") : "") +
+						(o.labeldx ? ("" + o.labeldx + "") : "") +
 						"" +
 					"" +
 					((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +

Carole scrive:
25 gennaio 2011 alle 22:05
Super script, il m’a sauver la vie pour une sélection multiple de plusieurs centaines d’éléments c’est ce qu’il me fallait.
Je cherche à modifier le script pour faire un sort automatique lors l’on ajouter un élément dans la liste des éléments sélectionnés mais je ne trouve pas comment modifier le code.
Merci de votre aide !!
Giovanni scrive:
28 gennaio 2011 alle 07:52
@Paul Vernon: can you send me paths at info[at]senamion.com please?

@Carole: new version with autoSort parameter!
FMaz scrive:
31 gennaio 2011 alle 16:42
Very nice plugin.
We wanted to use it for our right management page (to make the association between users and groups)

So I don’t need the moveOptions, but autoSort is great.
However, when I disable moveOptions, I’m unable to select any selected option in order to “remove a right”.

When I click an option, it get automatically unselected, asin the Demo 2.

I might now need to re-order my item, but I need to be able to select them if I want to remove them from the selected list …

Is a fix will be possible ?
Glenn scrive:
2 febbraio 2011 alle 00:35
Hi,
I really like your plug-in. Thanks for all your hard work.

Unfortunately it doesn’t appear to work correctly using versions of jQuery after 1.4.2 and this is preventing me from upgrading jQuery.

Thanks. Glenn.
Giovanni scrive:
2 febbraio 2011 alle 21:08
@FMaz: bug correct

@Glenn: i tested this plugin with new jquery 1.5, it seem ok
Antonio scrive:
10 febbraio 2011 alle 20:48
This plugin is really fantastic.

I need to keep selected items, so user can not move them out of “selected items”. I commented the code “rightSel.dblclick” function, but i found that if user select one of these items and press the “delete key”, the item moves out.

Is there some way to prevent this? I looked at the code, but i am not very used to work with jquery and javascript.

Thanks, and congratulations for this plugin.
Antonio scrive:
10 febbraio 2011 alle 20:54
Ummm… let’s forget my comment #109 because i guess that the “delete key” took my browser’s history back and i was looking at a different form
Antonio scrive:
17 febbraio 2011 alle 01:05
Hi,

i have a strange behavior with IE6 (i would kill IE6, but…)

Here i have a list of users, one of them is on the selected group:

http://clientes.antoniolite.com/tmp/01.png

With IE6, when i move it to the un-selected group:

http://clientes.antoniolite.com/tmp/02.png

Does anyone have the same behavior? Some idea about how to solve it? I have been dealing with it for long time, but got nothing…

Thanks
crimsonnail scrive:
26 febbraio 2011 alle 13:41
Thank you for a great library.
I added the option which deleted addAll and removeAll.
I extended it and the automatic sort option.
I disclose a source.

--- jquery.multiselect2side.js.orig 2011-02-26 20:29:30.000000000 +0900 +++ jquery.multiselect2side.js 2011-02-26 20:29:47.000000000 +0900 @@ -25,7 +25,8 @@ labelsx: 'Available', labeldx: 'Selected', maxSelected: -1, - autoSort: false + autoSort: false, + addAll: true }, o);
@@ -67,14 +68,14 @@ ((o.selectedPosition == 'right') ? ("›" + - "»" + + (o.addAll ? "»" : "") + "‹" + - "«") + (o.addAll ? "«" : "")) : ("‹" + - "«" + + (o.addAll ? "«" : "") + "›" + - "»") + (o.addAll ? "»" : "")) ) + "" + "" + @@ -108,12 +109,13 @@ leftSel.find("option").eq(0).attr("selected", true); // ON CHANGE SORT SELECTED OPTIONS - var nLastAutosort = 0; + var nSxLastAutosort = 0; + var nDxLastAutosort = 0; if (o.autoSort) allSel.change(function() { var selectDx = rightSel.find("option"); - if (selectDx.length != nLastAutosort) { + if (selectDx.length != nDxLastAutosort) { // SORT SELECTED ELEMENT selectDx.sort(function(a, b) { var compA = $(a).text().toUpperCase(); @@ -127,7 +129,27 @@ rightSel.append($(this).clone()); el.append($(this).attr("selected", true)); }); - nLastAutosort = selectDx.length; + nDxLastAutosort = selectDx.length; + } + + + var selectSx = leftSel.find("option"); + + if (selectSx.length != nSxLastAutosort) { + // SORT SELECTED ELEMENT + selectSx.sort(function(a, b) { + var compA = $(a).text().toUpperCase(); + var compB = $(b).text().toUpperCase(); + return (compA compB) ? 1 : 0; + }) + // FIRST REMOVE FROM ORIGINAL SELECT + el.find("option:not(:selected)").remove(); + // AFTER ADD ON ORIGINAL AND RIGHT SELECT + selectSx.each(function() { + leftSel.append($(this).clone().removeAttr("selected")); + el.append($(this).removeAttr("selected")); + }); + nSxLastAutosort = selectSx.length; } });
crimsonnail scrive:
2 marzo 2011 alle 17:13
Hello

jquery-1.4.4.min.js
jquery.multiselect2side_0.14

$(’#myselect’).multiselect2side({
selectedPosition: ‘left’,
autoSort: true
});

When a form was loaded in IE6, I become the script error.

error message is
“can’t set a selected property.
The value of the property is invalid.”
(Actually, it is output in Japanese.)

There is not the error when I turn off autoSort.
how?
crimsonnail scrive:
3 marzo 2011 alle 05:38
>When a form was loaded in IE6, I become the script error.
>There is not the error when I turn off autoSort.

I solved a problem.

original source:
>selectDx.each(function() {
> rightSel.append($(this).clone());
> el.append($(this).attr(”selected”, true));
>});

modified source:
selectDx.each(function() {
rightSel.append($(this).clone());
$(this).appendTo(el).attr(”selected”, true);
});
victor scrive:
5 marzo 2011 alle 10:47
@Şahin,@Giovanni:how about search function?any plan for?thanks a lot for this function.
Zeki scrive:
8 marzo 2011 alle 11:55
Hi,

I think this subject has been mentioned before. But I’m still dealing with sort problem. I’m using multiselect2side with FireFox and developing php application. Everything seems to be working but at the result page the order of selected elements seems to be alphabeticaly. But it must be at the order at I’ve selected and organised in previous page.

But I’ve found the bug which must corrected. It is working correctly when I firs select and move all the items to the left panel then organise, reorder them like I want to see. It isn’t working when you select your items which like you want to be seems.
Giovanni scrive:
9 marzo 2011 alle 16:48
@Zeki: I tested with firefox on this page http://www.senamion.com/blog/jmultiselect2side.html and seem correct.
You can test by clicking text after the first multiselect.
Glenn scrive:
11 marzo 2011 alle 01:38
@Giovanni
Sorry, I didn’t provide any details, so it makes your life difficult!

Using your Demo 2 for example. If I move Option 2 to the left box and submit the form, I find the following:

With jQuery 1.4.2 – form.second contains just the elements in the left box. (This is what I expected)
With jQuery > 1.4.2 – form.second contains all of the elements in the left box AND all of the elements in the right box.

In both cases form.secondms2side__sx contains just the elements in the right box.

Please send me an email if you need any further details.

Thanks for all your help Giovanni.
Glenn scrive:
11 marzo 2011 alle 06:37
@Giovanni,

Follow up…
It looks like the selected elements in #second are not being deselected when moved to the left box.

Thanks. Glenn.
Giovanni scrive:
15 marzo 2011 alle 07:02
New version 0.15 with new search option and a lot of ie6 bug correct.
New demo!
Giovanni scrive:
18 marzo 2011 alle 08:30
New version 0.16 with new autoSortAvailable option to automatic sort column “available”
Chesko scrive:
25 marzo 2011 alle 13:28
Excellent plugin, thanks for your work

Just two suggestions for possible improvement:

- First one, a possible bug: when using search option, the “selected” side has the wrong label and is named “available”. I think the problem is in this part of the code:

[code]
(o.labeldx || rightSearch != false ? ("" + (rightSearch != false ? rightSearch : o.labeldx) + "") : "") +
[/code]

The last o.labeldx should be o.labelsx?

- Secondly, an improvement, to select the minSize of the selects through options:

First part, the default options:
[code]
o = $.extend({
selectedPosition: 'right',
moveOptions: true,
labelTop: 'Top',
labelBottom: 'Bottom',
labelUp: 'Up',
labelDown: 'Down',
labelSort: 'Sort',
labelsx: 'Available',
labeldx: 'Selected',
maxSelected: -1,
autoSort: false,
autoSortAvailable: false,
search: false,
caseSensitive: false,
delay: 200,
minSize: 6
}, o);
[/code]

And finally the minSize:
[code]
// SIZE MIN
if (size < 6) {
$(this).attr("size", "" + o.minSize);
size = o.minSize;
}
[/code]

Hope this is useful!
Giovanni scrive:
25 marzo 2011 alle 18:32
@Chesko:

1) whene search is on I don’t show label of “selected” but search input
2) ok, I add it in new version
Michael scrive:
11 aprile 2011 alle 16:52
Hi

Some remarks about the CSS:
cursor: hand should be cursor: pointer
and color grey should be gray

I think they both will work in MSIE but not in Firefox. Not a big deal though, lovely plugin!

Regards
Giovanni scrive:
12 aprile 2011 alle 06:24
@Michael: very thanks
Giovanni scrive:
12 aprile 2011 alle 06:30
New release 1.0 with new optGroupSearch and minSize options and new methods destroy and addOption!
Kuba scrive:
24 aprile 2011 alle 13:38
Hi Giovanni, thanks for your plugin, I found it very useful in my scholarly project

I’ve noticed that if you want to add value which contains spaces, moving and sorting doesn’t work correctly. To fix that issue in every occurence of code like that:

el.find(”[value=" + next.val() + "]“);

you should add apostrophes:

el.find(”[value='" + next.val() + "']“)

Regards,
Kuba
AV scrive:
1 maggio 2011 alle 16:21
Hi (sorry for my english)

I found the same problem like say thw “Kuba”
the lines that must edit is
369
379
394
402
413
454
458
463
467
472
476
481
485

Thank you for your work
AV scrive:
1 maggio 2011 alle 16:48
(Sorry for my English)

I think I found one bug.
At line 537 must edit
from
value=’” + oAddOption.name + “‘
to
value=’” + oAddOption.value + “‘
Giovanni scrive:
5 maggio 2011 alle 06:08
New version 1.1. Thanks to Kuba and AV!
vanarie scrive:
11 maggio 2011 alle 18:24
When I pass labels with single quotes, it throws an error. I can escape or addslashes() that fixes the issue, but where do I unescape them in the display?

$label = addslashes($label);

Which places do I add .replace(/\\/gi, “”) in the js to unescape them?

Very handy multi-select. The filter is handy too.
AV scrive:
28 maggio 2011 alle 08:53
(Sorry for my English)
I think the option “minSize” do not work. Any value I put I have the same result.
AV scrive:
31 maggio 2011 alle 09:01
(Sorry for my English)
The script are slow when the items of the list is more than 200, and make more slow when the autoSort, autoSortAvailable are true.
bhavana scrive:
12 luglio 2011 alle 15:33
I wanted to know is it possible to refresh the left list dynamically?Suppose we add the selected items to the list on the right side, i was wondering if there is an ability to remove these selected items once they are selected.

Thanks
Bhavana
bhavana scrive:
12 luglio 2011 alle 15:35
i meant removing items from the right side,what i need is once the user selects the options in the right list, based on my code logic i should show them that these items are already selected and refresh the right list without the items which were selected.
Ann scrive:
27 luglio 2011 alle 21:13
Love the plugin – it does most of what I need in my application. I like the grouping feature for available options.

However is it possible to add a “dedupe” functionality so that if an option is repeated in the otpion groups (which is necessary in my application), that on moving those groups to the selected side, only the options that do not exist yet (in the selected side) are added?
Eric scrive:
31 agosto 2011 alle 00:51
Love it. Is it possible to add a method to deselect everything? I know there’s a button, but I mean a method that I can have an external force call?
Elliott scrive:
10 maggio 2012 alle 07:32
Hi there, really great plugin. Thank you.

Just in case it helps someone else, there’s an incompatibility between Chrome’s back button and the autosort parameter(!). If you have:

autoSort: true,
autoSortAvailable: true

and you submit the form, then click the back button in Chrome, the list of selected items is corrupted. If you then submit again you may be submitting completely incorrect data.
Chris Miller scrive:
28 agosto 2012 alle 18:22
Love this plugin, but have you consider using the jquery ui css? That would allow your control be work with jQuery UI themes. You would be able to shrink the size of the payload by using existing glyphs and css.

Senamion.com

Senamion:

Categorie:

Archivi:

jQuery select multiple double side

139 Comments a “jQuery select multiple double side”

Write a comment