Multi Select Widget
This module serves as a wrapper of SumoSelect, a jQuery plugin that provides enhanced select-box functionality.
Bind this widget to a parent container and mark each child select-box element with the data-multi_select-instance
attribute.
After the initialization of the widget all the marked elements will be converted into SumoSelect instances.
Options
Options Source | data-multi_select-source
| String | Optional
Provide a URL that will be used to fetch the options of the select box. The widget will perform a GET request to the provided destination and expects a JSON array with the options:
[ { "value": "1", "text": "Option #1" }, { "value": "2", "text": "Option #2" } ]
You can also pass other configuration directly in the parent element which will be used for every child instance.
Methods
Reload Options [AJAX]
You can use this method to refresh the options from the already provided data-multi_select-source or by providing a new URL which will also be set as the data-source of the element. If the multi select has no URL then it will just sync its values with the select element.
$('#my-multi-select').multi_select('reload', 'http://shop.de/options/source/url');
**Refresh Options**
Update the multi-select widget with the state of the original select element. This method is useful after performing
changes in the original element and need to display them in the multi-select widget.
```js
$('#my-multi-select').multi_select('refresh');
Events
// Triggered when the multi-select widget has performed a "reload" method (after the AJAX call).
$('#my-multi-select').on('reload', function(event) {});
Example
<form data-gx-widget="multi_select">
<select data-multi_select-instance data-multi_select-source="http://shop.de/options-source-url"></select>
</form>
Requires
- module:jQuery-SumoSelect