davidstutz / bootstrap-multiselect Goto Github PK
View Code? Open in Web Editor NEWJQuery multiselect plugin based on Twitter Bootstrap.
Home Page: https://davidstutz.github.io/bootstrap-multiselect/
License: Other
JQuery multiselect plugin based on Twitter Bootstrap.
Home Page: https://davidstutz.github.io/bootstrap-multiselect/
License: Other
I am not sure if this plugin supports IE8,
Looks like everything works fine except when the selection dialog is closing after one checkbox is selected.
HI,
I am attempting to use the method of .multiselect('select', text) but have come across a problem, which I believe may be Bootstrap related. Basically when attempting to use the above mentioned method I find that the whole dropdown is replicated. To better explain I have created a jsfiddle
If you select a value, then unselect it you should get a popup asking for confirmation. Selecting cancel should just replace the value,but it seems to duplicate the entire dropdown?
any assistance appreciated.
Dave
In example10 of the demo (http://davidstutz.github.com/bootstrap-multiselect/) after clicking refresh should the fields that are checked in the dropdown also have an active class associated to their li tag to be consistent with the rest of the examples?
Currently, we have onChange event, which provides data for the element which is being checked/unchecked.
Is there any event where i can find out all the options that are selected?
I am unable to find out how to get the selected values.
Hi,
great plugin. My issue: I want to reinit the dropdown after a .mulitiselect('destroy'). That doesn't seem possible, though.
Background: I remove some values from my multiselectboxes and add them later (depending on another select). Actually, I don't add them again, I do a '.replaceWith()' of the whole multiselectbox. That seems to screw things up, because a subsequent .mulitselect('rebuild') adds a complete new btn-group
I have a bootstrap-multiselect object bound to a list of objects and likewise have a selected items collection.
If I take the model and go like (pseudo code, forgive me)
selectedOptions.push(availableOptions)
or
selectedOptions.pop()
The multi-select isnt re-drawn until the second call.
If I have a add all button, it'll add 7 of 8 items (selecteditems shows all of the available options) but until you hit add again do you actually see it.
I'd say overall, it seems manipulating selections via js, doesnt work very well at all.
It would be much easier to use bootstrap-multiselect if widget will be able to initialize declaratively from data-toggle
attribute, Like modal dialog and other stuff that can be used without writing any line of code in javascript.
<select multiple="multiple" data-toggle="multiselect">
<option>...</option>
</select>```
Hi,
Using the multiselect, I have a lot of options in my implementation. I have the dropdown scrolling the options, but my plan is to present the options in two+ columns and then provide buttons that 'select all' or 'clear selected'.
Just wondering if adding select all and clear buttons was considered on the road map, if there are any tips for doing this effectively right now (ideally outside the plugin for obvious reasons) and if not, would it be worth building this out and contributing it back to this project?
thanks
I have created a select/deselect all toggle button. After I programatically select all options, and then deselect all options using the plugin API, the next select all won't update the drop-down button text because a 0 length set of "selected" options is passed to options.buttonText().
This issue is easily fixed by replacing all instances of 'option:selected' in the plugin with 'option[selected]'. This may indicate a jQuery issue with the selected selector?
You can see the code I'm using in this gist for which I pulled the relevant sections of code from the page I'm working on (sorry, the gist is untested): https://gist.github.com/jameslnewell/5288436
The buttonWidth property doesn't seem to have any effect...
Hi guys,
First of all congratulations for the project, it's an awesome component!
I am currently integrating the bootstrap-multiselect in my project, and to keep an harmony between components, i am planning to use it also for simple selection lists. I thought I was doing some mistake because I didn't got any data of those simple fields in the server side when submitting, but then I went the basics and started testing your showcase, and this is what I discovered: http://screencast.com/t/ceeZC10VGKo
As you can see in the video, the single component gets stacked and doesn't change it's value.
With a bit of googling I found this issue in stackoverflow ( http://stackoverflow.com/questions/12203767/jquery-chrome-and-selected-attribute-anomalies ) but I am really far to be an javascript master and solve it.
My version of Google Chrome is 26.0.1410.64 m. As far as I know, Internet Explorer is working correctly (sic).
Any help will be really appreciatted,
Thanks again for your great job!
Álvaro Vélez.
after the last merge, the 'select all' isn't working anymore
I have two options,and all of them are only two words.I give the multiselect option width "120px".You see,the option which convert to "ul.dropdown-menu " is too wide.
So, i want to config the option width,or it can change width automatically.
Hi David.
The button you append to the container on line 28 has no "type" attribut.
As long as the default button type of the button tag differs in different browsers this can result in the submitting a form (when the select is inside a form - usually it is) on clicking the button to display the select options.
So line 28 should be:
.append('' + this.options.text($('option:selected', select)) + ' ')
instead of:
.append('' + this.options.text($('option:selected', select)) + ' ')
Sorry, for dont supply a commit, i never used it until now :)
Dear Benjamin
Hi,
If you check the jquery ui version of multiselect, we can navigate to different options using Up Arrow /Down Array Keys. We can also select a particular option using space or enter key.
http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
This is not working in the bootstrap version of multiselect. Any idea how do we handle this here?
I'm not sure if I'm doing something wrong here, but on the demo page (http://davidstutz.github.com/bootstrap-multiselect/), if you load it up in IE9, go to any of the examples listed, and select some options, then try to deselect them, the selected count displayed on the button does not change.
Upon further investigation it appears to just be the button text that isn't updating - the source code is clearly showing that the options are being deselected. I'm guessing the buttonText function isn't firing when deselecting an option?
I'm not seeing any way to specify optionsText or value when using the knockout select. I have an array of key/value pairs that I need to bind to. Could someone point me in the right direction?
Thanks.
I can't get bootstrap-multiselect to work with Knockout. Can someone help me out? I have set up a fiddle at: http://jsfiddle.net/zNF9k/
guys, i have totally broken the ko functionality with my new option. i don't have a clue on how to solve this issue. maybe the guys that implemented ko binding handler could chime in?
When using ko and includeSelectAllOption:true, the component includes two options and when you click any item bad things happen :(
Hi David.
First of all thank you for this plugin which is really great and what i searched for.
I implemented it yesterday and it works great.
Yesterday night the new jquery version 1.9.0 has been released and with that included it now longer works.
The Multiselect is created - dropdown works.
But if you check a checkbox the select is not updated and the "text" also says "None selected".
Thanks for your assistance.
Dear Benjamin
Given a list like this:
<select>
<option>"hello"</option>
</select>
Multiselect will write this into the DOM:
<input style="margin-bottom:5px;" type="checkbox" value="'"hello"'" />
It needs to encode reserved characters in the value.
Hi,
I have a multiselect box with 30+ options which opens the dropdown all over the screen (and above).
Is it possible to define a max height or something similar to create a scrollbar inside the dropdown list?
I tried code with a long list and basically its not supporting long list it seems. Any plan for supporting long list?
I miss a method for rebuilding the dropdown list, which i can trigger after i have changed the options in the select.
Ay thoughts on this? At the moment i do this, after i have added or removed options from the select.
$select.multiselect('destroy');
$select.data('multiselect', null);
$select.multiselect();
Demo is broken with following error
GET http://davidstutz.github.com/bootstrap-multiselect/js/prettify.js 404 (Not Found)
After spending more hours than I care to say, I can only conclude that this is completely broken in the latest version of Bootstrap.
In particular, the text in the drop down appears as blue text that is underlined when I hover over them. Looking carefully at the demo, which shows the text as black, no underline, and a nice gradient blue background for selected items, it appears that the Bootstrap styling here has changed from "dropdown-menu a" to ".dropdown-menu > li > a".
There might be more going on here than that, but the result is still the same. Is anyone looking at this?
Thanks.
When the dropRight option is set, the menu doesn't behave different from when it is not present. Would expect the menu to not drop off the screen when this option is set and the button is aligned to the right of the page.
This is brilliant for a very long time multiselect required an update and none of those browser makers did it. who holds ctrl + click... no one!.
Great Plugin!
I think that a to filter the available options is a good thing. Can we discuss?
Just tried the demo on an ipad. It displays the drop downs fine does not allow me to select any boxes. The drop downs simply hide.
Hi,
Thanks for the work to date, it's a great enhancement to Bootstrap.
My application uses the onChange event to update other fields within the same form.
Unselecting a value (in my case) destroys quite a bit of user data. I would therefore like confirm with the user that they do actually wish to unselect a value before proceeding using a simple JS popup i.e.
if(confirm('Do you wish to remove this entry? In doing so you will permanently delete all prices you may have entered linked to this entry. This data cannot be recovered.'))...
Is there any way, that I can cancel the unselection from taking place, or at the very least re-select the value if the user tries to cancel the action?
Thanks
Dave
$('#select').multiselect('select', 'my-value');
-> when closed, dropdown shows that 'my-value' is currently selected - as expected.
$('#select').multiselect('select', 'select-all-option');
-> when closed, shows 'None selected' - should be 'All selected'.
I think that is good thing :) We're going to use this lib and i think this is a great feature for add. Can we discuss?
It's seems like when original element ('select' tag) set to display:none, then knockout (2.2.1) don't observe it, and $(element).trigger('change') in .onChange does nothing..
Hi,
The current Knockout JS support requires me to call the $('select[ multiple]').multiselect()
function before the Knockout bindings have been applied. But when I generate a multiple select elements in a foreach loop, like so:
<!-- ko foreach: multiValueFields -->
<div>
<label>
<span data-bind="text: name"></span>
<br />
<select multiple="multiple" data-bind="multiselect: true, options: items, optionsText: 'nameField', optionsValue: 'idField'">
</select>
</label>
</div>
<!-- /ko -->
I don't have the other select elements yet until the bindings have been applied...So how do I convert the remaining selects?
Can you start using semver tags on your repo? I use bower to install your plugin in my project and since there are no tags I can't specify which commit I want to install. Instead I'm stuck with always installing your latest commit which could have bugs sometimes.
Currently when getting the text of an option the
The space between the option tag can be filled with more than just text, and I want that html to be honored when its copied over to the multiselect dropdown.
A form element is being added to thee form with the value of true. Could you say what it is?
Hi -
Lovely plugin, but I passed it by once or twice because there was no live demo on the page. Suggest tweaking the README.md to show off the technology without having to download it and run it locally.
http://www.w3.org/TR/html401/interact/forms.html#h-17.6 says:
"This attribute allows authors to specify a shorter label for an option than the content of the OPTION element. When specified, user agents should use the value of this attribute rather than the content of the OPTION element as the option label."
This is not currently supported, the plugin simply uses the .text() for the label instead of the prop('label').
If several options are marked as 'selected' on page load, only one will show up as checked using this script. Example:
<select id="example" name="example" multiple="multiple">
<option value="1" selected="selected">Default 1</option>
<option value="2">Optional 1</option>
<option value="3" selected="selected">Default 2</option>
<option value="4">Optional 2</option>
</select>
Will show up as:
--1 selected--
Default 1
Optional 1
Default 2 X
Optional 2
<select>
<option>A</option>
<optgroup label='Group'>
<option>B</option>
</optgroup>
</select>
A will disappear in the above select list, because multiselect is not expecting it.
Moin David,
im trying to generate multiselects with different buttonTexts.
[please select height] [please select width]
i tried reading some of the elemts data attributes, but i cant access them. Only the options are passes as a parameter, not the element itself.
Also, Is it possible to make the none of the options selected on load?
line 244 has all items triggering a click event if user selects all, this isn't the best approach and has some major performance problems when dealing with lots of data. I hacked around this for my immediate need below. This approach doesn't consider anything else that the multiselect needs from the click/change event, such as updating the button (none selected is all selected for my requirements)
All I did was add a conditional for check/uncheck and i set the checked attribute and parent class instead of triggering an event. My thought on this is to create a method that does everything that needs to be done to a single list item on click/change, so the event is no longer required.
// Toggle all options if the select all option was changed.
if (isSelectAllOption) {
//$checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).attr('selected', 'selected');
if (checked) {
$checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).prop('checked', true).parents('li').addClass(this.options.selectedClass);
} else {
$checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).prop('checked', false).prop('selected', false).parents('li').removeClass(this.options.selectedClass);;
}
}
Current behaviour:
When I start typing in the filter text input field, my old/previous selected options are cleared. So I'm never able to search an option, select it and then search another option.
Expected behaviour:
Search for an option, select it (the button displays the text of this first option), search / filter for another option to select, select it (the button displays the text of both selected options).
I have created a JsFiddle http://jsfiddle.net/ZGmfZ/6/ where if I place the multiselect initialiser after ko.applyBindings, the dropdown works but the selectedoptions doesn't seem to get bound and if I do this before, as stated in the docs, no li's get added to the ul multiselect renders.
In my actual code, neither works.
Can you split the messages into locale-xx_YY.js files so we can contribute with translations for other languages?
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.