Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
To get started checkout examples and documentation at http://multiple-select.wenzhixin.net.cn.
A jQuery plugin to select multiple elements with checkboxes :)
Home Page: http://multiple-select.wenzhixin.net.cn
License: MIT License
Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
To get started checkout examples and documentation at http://multiple-select.wenzhixin.net.cn.
This plugin is awesome and I would very like to maintain it on my client's application. The problem is that scrolling is not appearing on select boxes on android/iPads/iPhones...
Can this be resolved?
I would like to know how to set "select all" enabled by default on page load.
I think that it also can be useful to have an option to display optgroup names instead of list of options in the title, when the whole groups were selected.
For example we can turn this:
into this
[Group1], [Group3]
instead of "Option1, Option2, Option3, Option7, Option..."
Optionally, it also can be displayed in the following way:
[Group1: Option1, Option2], [Group3: Option7]
when added this plugin into my project, it affected all the dropdownlists in my project which is not desired.
How would I resolve this issue?
I need a way to specify a wider drop down width. The scrolling works but I would rather not have to scroll right and left.
I try setting ms-drop { width: 290px; } but it gets reset to width: 155px; which is the same as the top input field.
Thanks for any help.
Robert
The drop down image (png image) is not displayed if more items are selected in Firefox. The image is visible in Chrome & IE 9 (Compatibility View).
I'm using the onClose event using simple function with one and only console.log(123)..And what i get in the console on closing the dropbox using a click is:
123
123
I've used breakpoints on close event in your plugin and the browser stops on each point which means close event is raised 2 times (lines 44 and 150 in ver 1.0.5).
Dont know if its a bug or a feature :)
Can you please explain the behaviour?
setSelects doesn't work in Firefox when using jquery 1.9. Works fine in Safari. Haven't tested other browsers.
I am using the code from fix #22 that fixes the filtering with optgroups error but when I post to the server I am getting weird values.
If I select the 4 items with the values [1, 2, 3, 4 ], the values I get on the server are [1, 2, 3, 4, 2, 3, 4].
When I look at the html after I select items the items in the original multiple select control are not selected and also the checkboxes in the plugin created html are also not checked.
The server is getting the correct values somehow but I am unsure as to why it posts a set of duplicate values starting at the second item.
I am using ASP.Net MVC and I simply capture the selected items using a string array of the name attribute on the original multi-select.
I am having some problems with hidden divs.
If I put the code in a undisplayed div (style="display:none;), when I display the div with a button, the box of the drop list appears but there is no option inside.
If I put the code in a displayed div(style="display:block;), it works perfectly.
Does anyone know how to solve this problem? Could it be because jQuery just runs once?
Thank you
I see that setting 'overrideButtonText : true' is possible to show 'selectAllText' when all options are selected.
This option is not documented and also it needs to be added to '$.fn.multipleSelect.defaults' as a default ( set as true for better user experience)
Thanks.
Please could you add hide() method f.e. I have The Single Row options and after event onClick I would like to hide multiple select (like the default behavior of select in browser)
Add a property( for example: allowMultipleSelect) that allows you to select only one option. The value of this property should be by default true(as the name of the plugin suggests).
I'm using the plugin inside a jquery UI modal. It appears when you check a check box the event fires twice. so it is checked then unchecked. Still adds value to the choice but it looks like the check box was not checked.
This only happens with checkboxes generated by your plugin. I added a normal checkbox and have no issue.
Also, it appears to be related to the modal. If I turn off the modal and use the UI dialog the issue does not happen. Seems that the overlay associated to the modal causes the event to fire twice.
Have you seen any issue like this?
Hello,
I tried to pass a variable from the options in order to change this line:
'<input type="' + type + '" name="selectItem" value="' + value + '"' +
As you can see all checkboxes will be named selectItem. Is there a way to change them?
Hello,
When I load the page with multiple select in IE8, the page takes too long to load. In any other browser no problems. This component is tested for this browser. Is it possible to fix it?
A greeting.
First of all, thank you for great plugin!
Does it support optgroups?
Please could your great multiple select be with radio buttons too? Sometimes only one item must be selected a it would solve this problem.
thans
hi all,
taking much time to respond when i click on dropdown list in chrome and ie.
where as responding properly in Firefox.
Please let me know if i need to submit any other details on this.
Thanks for your help in advance,
If select is binded change event like below:
<select onchange="fn()">
or
$('select').change(fn)
The change event won't fire after using multiple-select.
Hope to support it.
I want to check whether the multiple select is null on onblur and if then show an error message that at least one option should be select, but when i tried .blur() on it's not working. how can I implement onblur in multiple-select?
Jquery
please
http://upanh.in/lzy.jpg
tks
Hi,
thank you very much for this great plugin.
I tried filter: true
in a multipleSelect and it's not working (the search field is here, but no filtering). I tried on your demo site and with different browsers, it does not work either.
Could you check this, please?
multiselect was working but i'm not able make filter in the select.
->how can i solve that
If I want to use this what is the html code i want to use.
Maybe it's better to select only visible (filtered) items by checking "Select All" in the filtered list? What do you think?
I've encountered a problem, using filter and select group of items. After i used a filter to find an item and got 0 result, i pressed on the item group, since 0 results is still showing a group title. So i closed the dropdown and it ends with a selected group and zero items selected. That confused me.
There are possible ways to get rid of this problem.
How to update the contents in the dropdown after I have added new options dynamically.
Hi,
Your plugin is really cool thanks for your work! :)
There's one thing I could not achieve, maybe you can help me...
I'd like to have a "responsive" optgroups ul, that is, when the screen becomes too small, that the ms-drop / the optgroups li adapts its width and the optgroup elements "float:left" instead of being hidden....
Do you think that would be possible?
I have used two dropdowns in two different TR and same column level. When my website is opened in IE 10 Compatibility Mode First two values of first dropdown get hide behind second dropdown. Is there any Solution?
Hope to add
Sometimes, i need to highlight the select to guide user to re-select.
Hi,
I am looking for multiple-select-> filter 1 style control.
i just downloaded the code and trying to implement. but i couldn't get the way of adding dynamic values into the select control.
Please help me out.
NR
When we use filter to display filtered options, currently clicking on 'Select All' seems cannot trigger the onCheckAll & onUncheckAll events.
I need some color mark some of the option.
Setting the 'width' option to a percentage does not work for me. Can this plugin use percentages for the width. e.g. {width: '50%', ...}. That would be really nice to have.
It's not an issue. I think this can be a good idea to have a possibilility to display each optgroup in a separate column
for example we can turn this:
into this:
Group1 Group2 Group3 Opt-11 Opt-21 Opt-31 Opt-12 Opt-22 Opt-32 Opt-13 Opt-23
I think, it can add additional flexibility and in some cases it will be easier to read
How can I define the width of the button element?
Thanks!
widthClass could be like this:
if (this.options.widthClass) {
var widthClass = this.options.widthClass;
this.$choice.addClass(widthClass);
this.$choice.find('span').addClass(widthClass);
this.$drop.addClass(widthClass);
} else {
this.$choice.css('width', $el.width() + 'px').find('span').css(
'width', ($el.width() - 28) + 'px');
this.$drop.css({
width : $el.width() + 'px'
});
}
And the hard-coded input box's name 'selectItem' should be configurable so that it can be automatically binded by web framework like "Spring MVC".
Hi,
It would be possible to add a message when there are no results found?
Hi ,
The checkboxes get distorted when seen on Mobile Devices.
Please help on the same
Can you add a feature to reset the selected items programmatically. It can be useful for single page web apps where you need to reset all fields after ajax commit.
If there is a long list of options, it's a bit difficult to scroll down and find the item. Is there a way to search?
Is is possible to apply this functionality to a single select control on a page rather than all of them?
Can you pass in a control ID and just convert that one? Or set a class on the select controls you want converted?
When there are to many items would be great to search through the list
When creating an onClose event every time I click on the screen that event fires Shouldnt it only fire when the actually drop down closes after opening?
$('#DivisionAssigned').multipleSelect({
onClose: function() {
alert('select Closed')
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.