If positionMenuWithin is specified, the width of the menu is artificially constrained, such that it does not extend outside the bounds of the positionMenuWithin element when it is shown.

This was the first test that really required CSS styles (for the width and position calculations) so it necessitated a tidying up of the CSS files in /demo.

Thanks for the library, it works really well for us. I couldn't find how to dynamically change the values, but I am sure there must be a way. Could you provide an example?

I found that submitting the form with GET gives all the selections in the query string as expected. However, when substituting POST for the submission method there is only one of the multiple selections, the final one, in the POST array received by the server. To demonstrate this see the attached file ( change index.txt to index.php) Is this a bug or is this plugin designed to work only with GET submission?

index.txt

If HTML markup is provided via the modalHTML option, the resulting element will be inserted before the menu, and clicks on the element will close the menu.

demo/index.html includes an example of how this can be used.

Eg the "All categories" radio button here:

But, not necessarily limited to just the "empty" case. "empty" is just one example of a pre-set collection of options (and empty collection!) – you might equally have a collection of "my favourite options", or whatever, that should tick and untick the correct options in the menu below it.

It was noted that it’s bad practice to leave a <label> pointing at a hidden form element. So, if the <select> we’re converting is referenced in the for attribute of any <label>s in the document, we remove those for attribute, so the label isn’t left pointing at a hidden form element.

Fixes #28.

It was suggested by a recent FixMyStreet accessibility audit, that having a <label> continue to point to the (hidden) native <select> element isn’t ideal.

Perhaps .multiSelect() should replace the labels with a different element (<span>? <div>?) or maybe just remove the for attribute from any labels, so that assistive devices don’t get conflicting messages on what the label element is for?

Noted in https://github.com/mysociety/societyworks/issues/2785.

In lieu of larger changes suggested by #13/#14, this adds an all parameter to the preset item that acts the same as if you had listed all the options manually. This lets you create an All preset without listing the options as in my example in #13, but doesn't add any other functionality.

Fixes #10.

Apols for lack of integration test – I couldn’t work out how to append the $select to the DOM, inside the Jasmine test, so that the heights of the menu and the viewport could be measured. I seem to recall us having a hard time doing this before too, when we tried to write tests for #5 (and ultimately gave up).

In multi-selects with dozens, or even hundreds, of menu items, the .multi-select-menu can become unusably long, extending thousands of pixels down the page.

Ideally, $.multiSelect would work out the optimum max-height for the menu, such that it stops just above the bottom edge of the viewport, and with overflow: scroll set, the menu will be scrollable.

We’ll probably want to place a sensible minumum bound on this, so that, if a multi-select is triggered near the bottom of the window, we still get a usable .multi-select-menu that extends below the egde of the viewport, rather than an unusable one that stops inside the viewport.

This means the Closure Compiler does not try and rename them in advanced mode, which would break everything. All tests pass when Closure Compiled, as long as you specify the jQuery contrib extern. If things are gzipped, saves another 10% over simple gzipped.

File sizes:

• Before this PR, full size: 9285
• Uncompressed, ungzipped: 9375
• Simple CC, ungzipped: 5365 (57% of full size)
• Advanced CC, ungzipped: 4241 (45%)
• Uncompressed, gzipped: 2423 (26%)
• Simple CC, gzipped: 1702 (18%) (70% of uncompressed gzipped)
• Advanced CC, gzipped: 1517 (16%) (63% of uncompressed gzipped)

When defined a allText option, then select the options, it would be nice to add the allText before.

Proposal to change the updateButtonContents function.

Change this:

if (selected.length == 0) {
  this.$button.text( this.settings['noneText'] );
} else if ( (selected.length === options.length) && this.settings['allText']) {
  this.$button.text( this.settings['allText'] );
} else {
  this.$button.text( selected.join(', ') );
}

To this:

if (selected.length == 0) {
  this.$button.text( this.settings['noneText'] );
} else if ( (selected.length === options.length) && this.settings['allText']) {
  this.$button.text( this.settings['allText'] );
} else if (this.settings['noneText']){
  this.$button.text( this.settings['noneText'] + ': ' + selected.join(', ') );
} else {
  this.$button.text( selected.join(', ') );
}

This control works well with static options defined in HTML.

Is there a way to use this control to populate options from AngularJS using select / ng-options definitions ? If affirmative, are there any examples available ?

The first time the menu is opened, the script checks the menu size. If it would overflow, the max size is caculated and overflow is hidden. The second time, since overflow and size have not been reset, the same test return false and the size and overflow are now reset. And the menu overflows. Fix: if the size and overflow are reset before the test, everything's fine.

Hi, thank you for the excellent code. Is there a way for us to call the multiSelect() more than once? I would like to call it more than once because I want to modify the checkbox selections dynamically after .mutltiSelect() was called the first time

I am setting the options as follows where I am not setting the value field is not getting set, can some one help me

function bindDropDown1(data) { $.each(data, function (i, x) { $('#selec1').append(<option value="${x.Id}">${x.Name}</option>); }); }

Also if I would like to select few by default how can I do that