davidstutz / bootstrap-multiselect Goto Github PK

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.

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?

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?

Currently when getting the text of an option the $.text() function is being used. The $.html() should be used instead.

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.

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.

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.

Demo is broken with following error

GET http://davidstutz.github.com/bootstrap-multiselect/js/prettify.js 404 (Not Found)

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

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/

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

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 :(

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.

When I explicitly set my maxheight and have the multiselect box scrollable, I am still able to click the first hidden list item. I am afraid that users who are trying to click out of the select box to dismiss it will accidentally select a hidden value. Any thoughts??

$('#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'.

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.

I think that a to filter the available options is a good thing. Can we discuss?

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 tried code with a long list and basically its not supporting long list it seems. Any plan for supporting long list?

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.

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

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.

<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.

The buttonWidth property doesn't seem to have any effect...

It seems as though the dropdown styling structure has changed in the newer version of bootstrap. The dropdowns now look like the attached photo

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 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?

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?

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').

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!

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.

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

A form element is being added to thee form with the value of true. Could you say what it is?

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.

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

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

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

after the last merge, the 'select all' isn't working anymore

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>```

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?

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..

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?

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.

Can you split the messages into locale-xx_YY.js files so we can contribute with translations for other languages?

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();

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

http://jsfiddle.net/XrGzY/

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

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.

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);;

        }
}