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>

http://hemantnegi.github.io/jquery.sumoselect

Source:

Requires

  • module:jQuery-SumoSelect