crlcu / multiselect Goto Github PK

View Code? Open in Web Editor NEW

308.0 22.0 128.0 1.75 MB

jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side.

License: MIT License

CSS 1.96% HTML 17.31% JavaScript 80.73%

jquery-plugin multiselect

multiselect's Introduction

multiselect

jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side.

Demo

Requirements

jQuery 1.7 or higher

Quick start

Several quick start options are available:

Clone the repo: git clone https://github.com/crlcu/multiselect.git or
Install with Bower: bower install multiselect-two-sides.

Usage example

<div class="row">
	<div class="col-xs-5">
		<select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="3">Item 3</option>
			<option value="2">Item 2</option>
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/multiselect.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#multiselect').multiselect();
});
</script>

Bugs and feature requests

If your problem or idea is not addressed yet, please open a new issue.

Versioning

For transparency into release cycle and in striving to maintain backward compatibility, multiselect is maintained under the Semantic Versioning guidelines.

License

The multiselect plugin is open-sourced software licensed under the the MIT license.

multiselect's People

Contributors

Stargazers

Watchers

Forkers

tapirus brees01 holance fabletang jonket eboominathan klebergraciasoares xiaozhitaba arunram13 pagenoare glebofff yashilanka carabina gdseller subbu8016 dalgakiran guolee89 brunoribeiro94 efexen reydajp mo0feng cssfirefly enzozhou yuji0602 mastertux wimarbueno phibbs14 wlrichards diego-qgenda bayurepo hitscs ericmkaufman tuliren tyronewo masasih joshkg vfportero leotop sumnervan morgzz jagadeesanb feiman westhouseit dmenoni akvince klbr mkielb nextun simonluppescu linmingming nguyenphucthinh danowar2k rahman123 srikanthj09 yongfengf12 maksym-dev mztknb chaitanyavelaga josepaul28 nextiams manidip jtce wardzinskim prasadcertprime egorryaroslavl proximab tejrajs scitechno shanmukasri gabycampagna coldcode-moon trendingtechnology fraher adaosantos esetnik mohammedphp fralik rittersoftware avais392 tainguyenthe nrjchnd v-pbhagat cheansiven ramanpreet2591 domprojects hadimazalan ullychan danieldigitalart denis554 jake2309 incitedigital mucahidbaris lmoscoted monoblaine guiireal magpeng xqbasin johnmbaughman josephjlee eddiebui

multiselect's Issues

documentation : needs update ( moveToLeft and moveToRight not in option list)

moveToLeft and moveToRight are not mentionned in option list but are used in Multiple destinations example.

Also its not clear what the callBack parameter stand for :

Multiselect,
options
event
silent
skipStack

Nice plugin by the way, i am trying to port this to angullar.

top button alignment

There is a problem with the first button, it can be the undo or >> buttons, it shows a bit to the left not aligned with the others. I don't know if this problem is related to incompatibility with bootstrap 3 or no.

possible fixes

Thank you for your multiselect code!

Still testing this but these are a few things that caught my eye:

upgrade to newer boostrap
I'm not a jquery guy but the focus stays on the middle buttons when clicked
possibly a way to automate the size='8' attribute

This is what I'm using for html

<div class="row">
    <div class="col-sm-5">
        <select name="from" id="multiselect" class="col-sm-12" size="12" multiple="multiple">
            <option value="1">Item 1</option>
            <option value="2">Item 5</option>
            <option value="2">Item 2</option>
            <option value="2">Item 4</option>
            <option value="3">Item 3</option>
        </select>
    </div>

    <div class="col-sm-2">
        <button type="button" id="multiselect_rightAll" class="btn btn-default btn-block"><i class="fa fa-fast-forward fa-fw"></i></button>
        <button type="button" id="multiselect_rightSelected" class="btn btn-default btn-block"><i class="fa fa-chevron-right fa-fw"></i></button>
        <button type="button" id="multiselect_leftSelected" class="btn btn-default btn-block"><i class="fa fa-chevron-left fa-fw"></i></button>
        <button type="button" id="multiselect_leftAll" class="btn btn-default btn-block"><i class="fa fa-fast-backward fa-fw"></i></button>
    </div>

    <div class="col-sm-5">
        <select name="to" id="multiselect_to" class="col-sm-12" size="12" multiple="multiple"></select>
    </div>
</div>

Size attribute of the select control doesn't change height

It appears that changing the size attribute doesn't affect the height of the control.
Is this a bug or expected?

select name="from[]" id="multiselect_search" runat="server" size="50" multiple="true"
As a work-around, I'm doing this with CSS.

select#multiselect_search {
    height: 300px;
}

Thank you.

Using Ajax to Re-populate the Select List

I am using ajax to change the contents of the SELECT list options in the left side when a radio button is selected. I am successfully returning a new SELECT list to the multiselect without reloading the page. However, the list is dead. I am unable to get items to move from left to right. Also the list does not react to the Search entry. It seems like I need to re-initialize the multiselect in order to reset the data and activate the behaviors.

Here is what I am doing to change the contents of the SELECT list on the left.

Do I need to do something to get the behaviors working after reloading the left side in this manner?

$(function() {
$(".LoadListType").click(function() {
    dataString = "";
    $.ajax({
        type: "POST",
        url: "../_data/ajax_recipient_ddl.asp", 
        data: dataString,
        success: function(data) {
            $('#leftpanel').html('<input type="text" name="q" class="form-control" placeholder="Search..." />')
            .append(data)
        }
    });
});
});

Items are selected when posting page

When posting the page, items that are not selected in the select controls are automatically selected.

This is especially noticeable in IE either because the page posts back slightly slower, or because the selection of each item in the list takes a bit longer. In IE, I can watch each item highlight as it the 'selected' property is added to the option item.

Is this expected / necessary behavior? I'm wondering if it could be optional - or if we could choose to change the styling on the selected items (for post back only) so that they don't appear to be selected.

Thanks very much.

Search functionality not working in any version of IE

Hi. This is a great control.

The search functionality is not working in IE.
I checked your demo page and verified that this is not just happening on my web page.

Typing in the search field in IE doesn't result in immediate filtering.
Clicking enter while in the search field in IE 8+ doesn't have any effect.

Hopefully you'll be able to patch that. For now, I'm going to hide the search fields in IE to avoid problems.

Thanks,

startup remove doesn't seem to work

I'm sorry in advance if I am posting this in the wrong location but I couldn't figure out what to do. I like the plugin for Jquery but I'm having an issue. I'm using it in my java application and I managed to pass the full list of items to my jsp page and the selected list via a form to the jsp. The page renders will the fill list on the left with all the items selected that I want. But what I can't figure out how to do is to get the selected items rendered in the right. The way I read the documentation I thought startUp would default to remove which would remove the selected items from the left and put them in the right. My right select list has nothing in it. I appreciate any help on this.

jspCode.txt

Select few from single item

Hi,

Great plugin!
i am listing the available items and quantity on left box. i want to add a textbox and put some quantity of a single item to the right.

How can i check single item and its value and sort only few ?

Origin data in right select is not in request parameter

Hi, I like to use your multiselect plugin. But I have a problem.

I put some origin data in right select when server render the page:

<select multiple="multiple" id="multiselect_to" name="ids">
  <option value="1">test1</option>
  <option value="2">test2</option>
</select>

When I post the form include above selects to server, I found the origin data is not in the parameter of request. But the data I selected by clicking the "moveToRight" button is in request parameters.

I'm confused about this. Could you help me? Thanks.

TypeError: $(...).find(...).multiselect is not a function

Try to use your plugin insight my angular app and get an error during init.

Move up / Move down buttons

In issue #9 @liuyug asked to have this feature - this is a separate issue to better keep tracking of what was done.

submitAllRight uses submitAllLeft setting

https://github.com/crlcu/multiselect/blob/master/js/multiselect.js#L65

Line 65 reads:
submitAllRight: settings.submitAllRight !== undefined ? settings.submitAllLeft : true,

Should read:
submitAllRight: settings.submitAllRight !== undefined ? settings.submitAllRight : true,

Undo/redo weird behavior

Go to the demo page;
Play around with some other selects;
Go to the undo/redo demo;
Press the "undo" button several times;
See how the elements from the previous selects are inserted into the undo/redo select.

search with case insensetive is very slow

search was very good when it was case sensitive now it become very slow please if there is solution respond

Search very slow

If select have a large options "in my case 2000 options". The search freezer and very slow. Sory for my english.

Issues with keepRenderingSort

I am using the keepRenderingSort option and both lists have values at startup. This leads to somewhat sporadic behavior when moving items between the lists. It seems to add the moved item to the top or bottom of the list and the sort order flips from ascending to descending each time.

I'm not sure what is going on with the sort order flipping, but I have an idea of how to fix the issue with position. If you can assign position values to the items in the Left list, which starts out with all the values, then as you compare it to the right list, copy the position value to the matching items in the Right list before you remove them from the Left list. That way, as you move items back and forth, they will always have the correct position as defined by the original list.

If I get a chance, I will try to fix it and post the code here, but if you are able to take a look or provide any insight, that would be helpful.

2 Search in same page

Hello, i need to 2 Search in same page, how i can to do this ?

IE support for "Move All"

Open your demo (http://crlcu.github.io/multiselect/) in IE11 (maybe others)
None of the "Move All" (>> or <<) in the demo work

Keep search box if there is an optgroup element

In the source code I saw the comment as below

// Functions
            init: function() {
                var self = this;

                // For the moment disable sort and search if there is a optgroup element
                if (self.$left.find('optgroup').length || self.$right.find('optgroup').length) {
                    self.callbacks.sort = false;
                    self.options.search = false;  // why?
                }
                // ...
 }

when will this be supported?

handlebars is killing control...

Very nice control.

We're running into problems when using Handlebars to render new sets of List Items in the left side Select list. Handlebars abruptly replaces the items and doesn't care about the events that are hooked up to those items.

...Is there a way we can Deactivate all of the multiSelect events or the control itself so we can cleanly reactivate it again once Handlebars has finished rendering new items in the left hand list.

Options in the source multiselect list are auto-selected and POSTed to the server when form is submitted

I have this plugin enabled on a select field named from_topics[], which has about 200 <option> elements. The select element on the right is named topics[]. When I press the form's submit button, all of the options are selected (even though they were not moved to the right), and therefore the POST to the server includes all of these values, which is not desired.

To work around this, I have to use jQuery to intercept the form submission event and de-select them:

$('#topics_from').closest('form').submit(function(e) {
  // hack to de-select the options in the source list so they are not submitted to the server
  $('#topics_from option').prop('selected', false);
});

I don't think the option elements in the source list should be selected when the submit button is pressed.
Thanks

Search

hi,

I downloaded latest release but could not find the search box for multiselect.

is it removed.?

Drag and drop or sortable

Is it possible to add drag and drop on select's options, something like jqueryui sortable or there is another
way?

Delay in posting form with 2.2.6

I love this plugin, but have a small question or two:

With 2.2.6 I'm seeing a delay from when I click my form's submit button, that I believe I didn't see with releases prior to 2.2.6.

In addition, the left (from[]) side now removes the select element prior to posting, which never appeared to happen with older versions.

Is there some clean-up going on before control is passed to the form handler? This delay can be around 500ms-1000ms. I cannot seem to prevent this. The select element (from[]) contains around 200 items.

Thanks in advance.

Case Insenstive search

i want to make the search case insestive

My select list have a very large option set. The search freezes when I start typing in the search box.

I have around 1500 records in the select list. When I try to search the option screen freezes. After some time typed text shows in the search box and items matching text are shown in the select area. Can it be more faster.

optgroup tag

Add support for optgroup tag as @liuyug requested in #11

How do you get the value of a moved item?

I've tried console.log for the parameters and I get the following. Clearly there's an item selected, but it doesn't tell me anything about it.

Please add a license file

Filtering select

Hi, can you add filtering?
I imagine a simple input type/text that filters the options.
Really useful when option are more than 100. In general it is a cool feature.
I'm too busy to extend.

Thanks in advance.
V

Multiselect not responsive

http://crlcu.github.io/multiselect/#documentation
it is good but not responsive

Bug detected...

Hi,
I'd like to point you to a bug which i detected:
when you add the search option and type one character to filter ,Tab to right_all_Button and press space, the items on the left side will be disapeared and there is no chance to bring them back without reloading the page!!
Thx
RG

Two Destinations

Is it possible to have multiple destinations. I will have a main list of players that I want add to list 1 for starting 11 and add to list 2 with what is left for substitutions list.

Many Thanks
Scott

don't select all option when submit.

With my latest firefox, I do not get all option after submitting. I find your statement with attr. I think it should be prop

                // select all the options from left and right side
                // when submiting the parent form
                self.right.closest('form').on('submit', function(e) {
                    self.left.children().prop('selected', true);
                    self.right.children().prop('selected', true);
                    });

moveToRight, there is a copyToRight and clearFromRight

Hi, many thinks multiselect project.
There is a function in my mini project. Multiple right selects, just one left select. So when i clicked "copyToRight" button, the value of option from left select will copy to one of right selects. When i click the "clearFromRight" button, the value of option will disappear from right select.How about this feature?

Using optgroups breaks keepRenderingSort

When keepRenderingSort is set to true, the options fall out of their optgroups after being moved. Also empty optgoups are still being displayed. Example: http://jsbin.com/tozexepoci/edit?html,js,output

Undo and redo

I would like to have undo and redo for this. If I have time I might look into it but for now this is just a feature request :)

I think this could be implemented by giving each option an id and creating a list of command-objects that contain a set of ids and a direction. When undo is called it simply looks at the direction and does the opposite with all options that are listed. Then the command-object is moved to a redo list. Every time the user clicks an action the redo list is emptied.

New Functionality

New functionality that will move option to the same place in left select that had before move to right select. It will be useful when ordering is diffrent then alphabetic, for example elemets are sorted on backend.

Dynamic Data

How to bind it with data which I get from Ajax Call

Search in IE11

Hi,
Thanks for give good plugin. Unfortunately we are facing issue with search i.e. its not working in IE11 where as it works fine in Chrome.

Thanks

package.json - browserify support

Hey,

First of all, your plugin looks great. Have u consider adding it to npm registery? I'm using a setup when the packages can be only installed via npm, so its kinda obstacle to me.

I will be fine without putting it into registery, all I need is package.json file in the repo, because since version 2.x of npm, packages can be installed from github :)

edit:

Apperantly that's not all. I've forked the repo, created simple package.json, installed via npm install pagenoare/multiselect. I've tried to use it within the code:

require('multiselect');

but building the project gives me error:

Error: Cannot find module 'multiselect' from PATH
Warning: Error running grunt-browserify. Use --force to continue.

Thanks!

keep render order with right side

right side don't have position value, so add it.

                if ( typeof self.callbacks.startUp == 'function' ) {
                    self.callbacks.startUp( self.left, self.right );

                    self.right.find('option').each(function(index, option) {
                        $(option).data('position', index);
                    });

                }

Ajax post doesnt receive selected values

Hello, not sure what is happening, but when i post some selected values via ajax, i cannot get them,
http://i.imgur.com/8VkDnII.png . I'm also using 3rd party ajax fraamework called Sijax, i tought it is this plugin issue, but then i tried with standard ajax, it is the same.

This is my init script:

$('#search').multiselect({ submitAllLeft: false, submitAllRight: true, search: { left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', } });

This is ajax submit function:
$.ajax({ type: "POST", url: "/tools/testpost.php", data: $("#domainsgroup").serialize(), // serializes the form's elements. success: function (data) { alert(data); // show response from the php script. } });

And the output is in the screenshot. One time it was ok, when i did search, the selected all, and by doing this it worked fine, but if select one by one without searching, then something is not right. I was trying to do this on click submit, before requesting via ajax:

$("select#search_to option").each(function () { $(this).attr("selected", ""); //console.log($(this)); });

Not sure if i'm doing something wrong or what is happening. Also i tried simple form post, then it worked ok, but with ajax i have problems. Thanks!

do not submit option when using optgroup

You code

                // Select all the options from left and right side when submiting the parent form
                self.$right.closest('form').on('submit', function(e) {
                    self.$left.children().prop('selected', self.options.submitAllLeft);
                    self.$right.children().prop('selected', self.options.submitAllRight);
                });

children() only list all first level children.
When using tag optgroup, all tag option will be ignore...
My code as reference.

                self.$right.closest('form').on('submit', function(e) {
                    self.$left.children().each(function(index, option) {
                        var $option = $(option);
                        if ($option.is('optgroup')) {
                            $option.children().prop('selected', self.options.submitAllLeft);
                        } else {
                            $option.prop('selected', self.options.submitAllLeft);
                        }
                    });
                    self.$right.children().each(function(index, option) {
                        var $option = $(option);
                        if ($option.is('optgroup')) {
                            $option.children().prop('selected', self.options.submitAllLeft);
                        } else {
                            $option.prop('selected', self.options.submitAllLeft);
                        }
                    });
                });

Multiple destinations Doesn't Works Safari

Hi,

Multiple destinations doesn't Work, button all right, or button all left, nothing do.

You can helpme?

Safari Support for "Move All"

Open your demo (http://crlcu.github.io/multiselect/) in Safari (v8.0 or v9.0, maybe others)
None of the "Move All" (>> or <<) in the demo work

double-click not working in new IE (11 and 12)

There is a hack in the code to support the double-click:

                // dblclick support for IE
                if ( navigator.userAgent.match(/MSIE/i) ) {
                    self.left.dblclick(function(e){
                        actions.rightSelected.trigger('click');
                    });

                    self.right.dblclick(function(e){
                        actions.leftSelected.trigger('click');
                    });
                }

The useragent string got changed in the newer versions of IE. The code needs to be enhanced. Check this out: http://stackoverflow.com/questions/19999388/jquery-check-if-user-is-using-ie

The proposed enhancement is:

                // dblclick support for IE
                if ( navigator.userAgent.match(/MSIE/i)  || navigator.userAgent.indexOf('Trident/') > 0 || navigator.userAgent.indexOf('Edge/') > 0) {

Search is case sensitive

Due to the use of the ":contains" selector the search is case sensitive. Your plugin is very useful but I do need case insensitive search. Would it be possible to provide a way to override the search?

Doesn't work with jQuery 1.7.0

The following error is thrown when using with jQuery 1.7.0:

TypeError: $.expr.createPseudo is not a function

A google search lead me to this SO, which does solve the issue, but I'm not sure if it would effect some functions.