diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js index a7c71eab..3c94a709 100644 --- a/dist/js/bootstrap-multiselect.js +++ b/dist/js/bootstrap-multiselect.js @@ -385,6 +385,7 @@ selectAllJustVisible: true, enableFiltering: false, enableCaseInsensitiveFiltering: false, + enableReplaceDiacritics: true, enableFullValueFiltering: false, enableClickableOptGroups: false, enableCollapsibelOptGroups: false, @@ -1079,6 +1080,11 @@ this.query = this.query.toLowerCase(); } + if (this.options.enableReplaceDiacritics) { + filterCandidate = this.replaceDiacritics(filterCandidate); + this.query = this.replaceDiacritics(this.query); + } + if (this.options.enableFullValueFiltering && this.options.filterBehavior !== 'both') { var valueToMatch = filterCandidate.trim().substring(0, this.query.length); if (this.query.indexOf(valueToMatch) > -1) { @@ -1120,6 +1126,28 @@ } }, + /** + * Replace diacritics (ă,ş,ţ etc) with their "normal" form + * + * @param s + * @returns string + */ + replaceDiacritics: function (s) { + var _in = '¹²³áàâãäåaaaÀÁÂÃÄÅAAAÆccç©CCÇÐÐèéêəëeeeeeÈÊËEEEEE€gGiìíîïìiiiÌÍÎÏÌIIIlLnnñNNÑòóôõöoooøÒÓÔÕÖOOOØŒ®ЯšsߊSùúûüuuuuÙÚÛÜUUUUýÿÝŸžzzŽZZ', + _out = '123aaaaaaaaaAAAAAAAAAaccccCCCDDeeeeeeeeeeEEEEEEEEEgGiiiiiiiiiIIIIIIIIILnnnNNNoooooooooOOOOOOOOOOcRssbSSuuuuuuuuUUUUUUUUyyYYzzzZZZ', + _rgx = new RegExp('[' + _in + ']', 'g'), + transl = {}, i, + lookup = function (m) { + return transl[m] || m; + }; + + for (i = 0; i < _in.length; i++) { + transl[_in[i]] = _out[i]; + } + + return s.replace(_rgx, lookup); + }, + /** * Unbinds the whole plugin. */ diff --git a/index.html b/index.html index 2574868b..e261c159 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,82 @@ - - Bootstrap Multiselect - - + + Bootstrap Multiselect + + - - - + + + - - - + + + - - + + - - - - Fork me on GitHub - -
-
- -
-
-

Bootstrap Multiselect

-
- -

- Some option names may have changed during the last few commits! -

- -

- Please consult the FAQ and the Issue Tracker before creating a new issue. -

- -

- Please have a look at How to contribute? and the Issue Tracker. -

- -
-

Getting Started

-
+ + + +Fork me on GitHub + +
+
+ +
+
+

Bootstrap Multiselect

+
-
    -
  1. -

    Link the Required Files

    +

    + Some option names may have changed during the last few commits! +

    -

    - First, the jQuery library needs to be included. Then Twitter Bootstrap - both the Javascript library and the CSS stylesheet - needs to be included. -

    +

    + Please consult the FAQ and the Issue Tracker before + creating a new issue. +

    + +

    + Please have a look at How to contribute? and the Issue Tracker. +

    + +
    +

    Getting Started

    +
    + +
      +
    1. +

      Link the Required Files

      + +

      + First, the jQuery library needs to be included. + Then Twitter Bootstrap - both the + Javascript library and the CSS stylesheet - needs to be included. + 

       <!-- Include Twitter Bootstrap and jQuery: -->
@@ -82,24 +89,31 @@ 
      Link the Required Files
      
 <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
      -

      - The jQuery library can also be included using a CDN, for example the Google CDN: -

      +

      + The jQuery library can also be included using a CDN, for example the Google + CDN: + 

       <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      -

      - Note that the plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the version. -

      -
      2. -
    2. -

      Create a Select

      +

      + Note that the plugin will work both with version 2.x of the jQuery library as well as with + version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the + version. +

      +
      3. +
    3. +

      Create a Select

      -

      - Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multiple attribute as to get a real multiselect - but do not worry, the plugin can also be used as usual select without the multiple attribute being present. -

      +

      + Now simply use HTML to create your select input which you want to turn into a + multiselect. Remember to set the multiple attribute as to get a real multiselect - + but do not worry, the plugin can also be used as usual select without the multiple + attribute being present. + 

       <!-- Build your select: -->
@@ -112,30 +126,31 @@ 
      Create a Select
      
     <option value="onions">Onions</option>
 </select>
      -
      4. -
    4. -

      Call the Plugin

      +
      5. +
    5. +

      Call the Plugin

      -

      - In the end, simply call the plugin on your select. You may also specify further options, see the Options tab for further information. -

      +

      + In the end, simply call the plugin on your select. You may also specify further + options, see the Options tab for further information. +

      -
      - - -
      -
      +
      + + +
      + 
       <!-- Initialize the plugin: -->
 <script type="text/javascript">
@@ -144,129 +159,151 @@ 
      Call the Plugin
      
     });
 </script>
      -
      -
      6. -
    - -
    -

    Configuration Options

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Overview -
    multipleenableHTMLenableClickableOptGroups
    enableCollapsibleOptGroupsdisableIfEmptydropRight
    dropUpmaxHeightdisableIfEmpty
    disabledText - onChangeonInitialized
    onDropdownShowonDropdownHideonDropdownShown
    onDropdownHiddenbuttonClassinheritClass
    buttonContainerbuttonWidthbuttonText
    buttonTitlenonSelectedTextnSelectedText
    allSelectedTextnumberDisplayeddelimiterText
    optionLabeloptionClassselectedClass
    includeSelectAllOptionselectAllJustVisibleselectAllText
    selectAllValueselectAllNameselectAllNumber
    onSelectAllenableFilteringenableCaseInsensitiveFiltering
    enableFullValueFilteringfilterBehaviorfilterPlaceholder
    - -

    - Use Firebug, Chrome Developer Tools to get the best out of the below examples. -

    - - - - - - + + + + + + +
    multiple -

    - multiple is not a real configuration option. It refers to the multiple attribute of the select the plugin is applied on. When the multiple attribute of the select is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the multiple attribute present), the first option will automatically be selected if no other option is selected in advance. See #129 for how to avoid this behavior. -

    - -

    - The following example shows the default behavior when the multiple attribute is omitted: -

    - -
    - - -
    -
    + + + +
    +

    Configuration Options

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Overview +
    multipleenableHTMLenableClickableOptGroups +
    + enableCollapsibleOptGroups + disableIfEmptydropRight
    dropUpmaxHeightdisableIfEmpty
    disabledText + onChangeonInitialized
    onDropdownShowonDropdownHideonDropdownShown
    onDropdownHiddenbuttonClassinheritClass
    buttonContainerbuttonWidthbuttonText
    buttonTitlenonSelectedTextnSelectedText
    allSelectedTextnumberDisplayeddelimiterText
    optionLabeloptionClassselectedClass
    includeSelectAllOption + selectAllJustVisibleselectAllText
    selectAllValueselectAllNameselectAllNumber
    onSelectAllenableFilteringenableCaseInsensitiveFiltering +
    enableFullValueFiltering + filterBehaviorfilterPlaceholder
    + enableReplaceDiacritics +
    + +

    + Use Firebug, Chrome Developer Tools to get the best out of the below examples. +

    + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
    multiple +

    + multiple is not a real configuration option. It refers to the + multiple attribute of the select the plugin is applied on. When + the multiple attribute of the select is present, the plugin uses + checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons + to allow single selections. When using the plugin for single selections (without the multiple + attribute present), the first option will automatically be selected if no other option is + selected in advance. See #129 for how + to avoid this behavior. +

    + +

    + The following example shows the default behavior when the multiple attribute is + omitted: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $('#example-single').multiselect();
@@ -281,28 +318,30 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    -
    - -

    - If multiple options are selected in advance and the select lacks the multiple attribute, the last option marked as selected will initially be selected by the plugin. -

    - -
    - - -
    -
    +
    + +

    + If multiple options are selected in advance and the select lacks the multiple + attribute, the last option marked as selected will initially be selected by the + plugin. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $('#example-single-selected').multiselect();
@@ -318,28 +357,29 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    -
    - -

    - The following example shows the default behavior when the multiple attribute is present. Initially selected options will be adopted automatically: -

    - -
    - - -
    -
    +
    + +

    + The following example shows the default behavior when the multiple attribute is + present. Initially selected options will be adopted automatically: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $('#example-multiple-selected').multiselect();
@@ -355,30 +395,32 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    - -

    - The plugin naturally supports optgroup's, however the group headers are not clickable by default. See the enableClickableOptGroups option for details. -

    -
    - - -
    -
    + +

    + The plugin naturally supports optgroup's, however the group headers are not + clickable by default. See the enableClickableOptGroups option for details. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $('#example-multiple-optgroups').multiselect();
@@ -396,27 +438,29 @@ 
    Configuration Options
    
     </optgroup>
 </select>
    -
    -
    enableHTML -

    - XSS injection is a serious thread for all modern web applications. Setting enableHTML to false (default setting) will create a XSS save multiselect. -

    - -
    - - -
    -
    +
    +
    enableHTML +

    + XSS injection is a serious thread for all modern web applications. Setting + enableHTML to false (default setting) will create a XSS save + multiselect. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -428,64 +472,68 @@ 
    Configuration Options
    
 </select>
    -

    On the other hand, when setting enableHTML to true, the plugin will support HTML within options:

    +

    On the other hand, when setting enableHTML to true, the plugin + will support HTML within options:

    -
    - - -
    -
    + }); + + +
    + 
     <script type="text/javascript">
     $(doclect>
-
    ument).ready(function() { - $('#example-xss-html').multiselect(); - }); -</script> -<select id="example-xss-html" multiple="multiple"> - <option value="1">&gt;span style="color:red"&lt;Option 1&gt;/span&gt;</option> -</select> -
    enableClickableOptGroups -

    - If set to true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group. -

    - -
    - - -
    -
    + ument).ready(function() { + $('#example-xss-html').multiselect(); + }); + </script> + <select id="example-xss-html" multiple="multiple"> + <option value="1">&gt;span style="color:red"&lt;Option 1&gt;/span&gt;</option> + </select> + +
    enableClickableOptGroups +

    + If set to true, optgroup's will be clickable, allowing to easily + select multiple options belonging to the same group. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -495,35 +543,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Note that this option does also work with disabled options: -

    - -
    - - -
    -
    +
    + +

    + Note that this option does also work with disabled options: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -533,37 +581,39 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Note that the behavior of onChange changes. Whenever an optgroup is changed/clicked, the onChange event is fired with all affected options as first parameter. -

    - -
    - - -
    -
    +
    + +

    + Note that the behavior of onChange changes. Whenever an optgroup is + changed/clicked, the onChange event is fired with all affected options as first + parameter. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -576,38 +626,39 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    enableCollapsibleOptGroups -

    - If set to true, optgroup's will be collapsible. -

    - -
    - - -
    -
    +
    +
    enableCollapsibleOptGroups + +

    + If set to true, optgroup's will be collapsible. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -617,27 +668,27 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    disableIfEmpty -

    - If set to true, the multiselect will be disabled if no options are given. -

    - -
    - - -
    -
    +
    +
    disableIfEmpty +

    + If set to true, the multiselect will be disabled if no options are given. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -647,28 +698,30 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    disabledText -

    - The text shown if the multiselect is disabled. Note that this option is set to the empty string '' by default, that is nonSelectedText is shown if the multiselect is disabled and no options are selected. -

    - -
    - - -
    -
    +
    +
    disabledText +

    + The text shown if the multiselect is disabled. Note that this option is set to the empty + string '' by default, that is nonSelectedText is shown if the + multiselect is disabled and no options are selected. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -679,30 +732,31 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - The disabledText option does also work when the underlying select is disabled: -

    - -
    - - -
    -
    +
    + +

    + The disabledText option does also work when the underlying select + is disabled: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -720,30 +774,30 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    -
    - -

    - Note that selected options will still be shown: -

    - -
    - - -
    -
    +
    + +

    + Note that selected options will still be shown: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -761,35 +815,35 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    -
    -
    dropRight -

    - The dropdown can also be dropped right. -

    - -
    - - -
    -
    +
    +
    dropRight +

    + The dropdown can also be dropped right. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -800,49 +854,53 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    dropUp -

    - The dropdown can also be dropped up. Note that it is recommended to also set maxHeight. The plugin calculates the necessary height of the dropdown and takes the minimum of the calculated value and maxHeight. -

    - -

    - Note that this feature has been introduced in #594 and is known to have issues depending on the environment. -

    - -
    - - -
    -
    -
    -<script type="text/javascript">
-    $(document).ready(function() {
-        $('#example-dropUp').multiselect({
-            enableFiltering: true,
-            includeSelectAllOption: true,
-            maxHeight: 400,
+
    +
    dropUp +

    + The dropdown can also be dropped up. Note that it is recommended to also set + maxHeight. The plugin calculates the necessary height of the dropdown and takes + the minimum of the calculated value and maxHeight. +

    + +

    + Note that this feature has been introduced in #594 and is + known to have issues depending on the environment. +

    + +
    + + +
    +
    +
    +<script type="text/javascript">
+    $(document).ready(function() {
+        $('#example-dropUp').multiselect({
+            enableFiltering: true,
+            includeSelectAllOption: true,
+            maxHeight: 400,
             dropUp: true
         });
     });
@@ -857,78 +915,80 @@ 
    Configuration Options
    
     <option value="6">Option 6</option>
 </select>
    -
    -
    maxHeight -

    - The maximum height of the dropdown. This is useful when using the plugin with plenty of options. -

    - -
    -

    - The multiselect on the left uses maxHeight set to 200. On the other hand, the multiselect on the right does not use maxHeight. -

    - - - - -
    -
    +
    +
    maxHeight +

    + The maximum height of the dropdown. This is useful when using the plugin with plenty of + options. +

    + +
    +

    + The multiselect on the left uses maxHeight set to 200. On the + other hand, the multiselect on the right does not use maxHeight. +

    + + + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -938,34 +998,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    checkboxName -

    - The name used for the generated checkboxes. See Server-Side Processing for details. -

    - -
    - - -
    -
    +
    +
    checkboxName +

    + The name used for the generated checkboxes. See Server-Side Processing + for details. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -975,40 +1036,43 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    onChange -

    - A function which is triggered on the change event of the options. Note that the event is not triggered when selecting or deselecting options using the select and deselect methods provided by the plugin. -

    - -

    - Note that the behavior of onChange changes when setting enableClickableOptGroups to true. -

    - -
    - - -
    -
    +
    +
    onChange +

    + A function which is triggered on the change event of the options. Note that the event is not + triggered when selecting or deselecting options using the select and deselect + methods provided by the plugin. +

    + +

    + Note that the behavior of onChange changes when setting enableClickableOptGroups + to true. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1020,41 +1084,41 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    onInitialized -

    - A function which is triggered when the multiselect is finished initializing. -

    - -
    - -
    - - -
    -
    -
    +
    +
    onInitialized +

    + A function which is triggered when the multiselect is finished initializing. +

    + +
    + +
    + + +
    +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1079,40 +1143,40 @@ 
    Configuration Options
    
     <button id="example-onInitialized-button" class="btn btn-primary">Activate!</button>
 </div>
    -
    -
    onDropdownShow -

    - A callback called when the dropdown is shown. -

    - -

    - The onDropdownShow option is not available when using Twitter Bootstrap 2.3. -

    - -
    - - -
    -
    +
    +
    onDropdownShow +

    + A callback called when the dropdown is shown. +

    + +

    + The onDropdownShow option is not available when using Twitter Bootstrap 2.3. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1124,40 +1188,40 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    onDropdownHide -

    - A callback called when the dropdown is closed. -

    - -

    - The onDropdownHide option is not available when using Twitter Bootstrap 2.3. -

    - -
    - - -
    -
    +
    +
    onDropdownHide +

    + A callback called when the dropdown is closed. +

    + +

    + The onDropdownHide option is not available when using Twitter Bootstrap 2.3. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1169,40 +1233,40 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    onDropdownShown -

    - A callback called after the dropdown has been shown. -

    - -

    - The onDropdownShown option is not available when using Twitter Bootstrap 2.3. -

    - -
    - - -
    -
    +
    +
    onDropdownShown +

    + A callback called after the dropdown has been shown. +

    + +

    + The onDropdownShown option is not available when using Twitter Bootstrap 2.3. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1214,40 +1278,40 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    onDropdownHidden -

    - A callback called after the dropdown has been closed. -

    - -

    - The onDropdownHidden option is not available when using Twitter Bootstrap 2.3. -

    - -
    - - -
    -
    +
    +
    onDropdownHidden +

    + A callback called after the dropdown has been closed. +

    + +

    + The onDropdownHidden option is not available when using Twitter Bootstrap 2.3. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1259,34 +1323,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    buttonClass -

    - The class of the multiselect button. -

    - -
    - - -
    -
    +
    +
    buttonClass +

    + The class of the multiselect button. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1296,34 +1360,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    inheritClass -

    - Inherit the class of the button from the original select. -

    - -
    - - -
    -
    +
    +
    inheritClass +

    + Inherit the class of the button from the original select. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1333,34 +1397,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    buttonContainer -

    - The container holding both the button as well as the dropdown. -

    - -
    - - -
    -
    +
    +
    buttonContainer +

    + The container holding both the button as well as the dropdown. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1370,34 +1434,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    buttonWidth -

    - The width of the multiselect button may be fixed using this option. -

    - -
    - - -
    -
    +
    +
    buttonWidth +

    + The width of the multiselect button may be fixed using this option. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1407,28 +1471,29 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    Note that if the text in the button title is too long, it will be truncated and use an ellipsis

    - -
    - - -
    -
    +
    + +

    Note that if the text in the button title is too long, it will be truncated and use an + ellipsis

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1438,28 +1503,28 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - This does also work for long options: -

    - -
    - - -
    -
    +
    + +

    + This does also work for long options: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1469,57 +1534,62 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    buttonText -

    - A callback specifying the text shown on the button dependent on the currently selected options. -

    - -

    - The callback gets the currently selected options and the select as argument and returns the string shown as button text. The default buttonText callback returns nonSelectedText in the case no option is selected, nSelectedText in the case more than numberDisplayed options are selected and the names of the selected options if less than numberDisplayed options are selected. -

    - -
    - - -
    -
    + return labels.join(', '); + } + } + }); + }); + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1548,47 +1618,52 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    buttonTitle -

    - A callback specifying the title of the button. -

    - -

    - The callback gets the currently selected options and the select as argument and returns the title of the button as string. The default buttonTitle callback returns nonSelectedText in the case no option is selected and the names of the selected options of less than numberDisplayed options are selected. If more than numberDisplayed options are selected, nSelectedText is returned. -

    - -
    - - -
    -
    + return labels.join(' - '); + } + }); + }); + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1607,34 +1682,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    nonSelectedText -

    - The text displayed when no option is selected. This option is used in the default buttonText and buttonTitle functions. -

    - -
    - - -
    -
    +
    +
    nonSelectedText +

    + The text displayed when no option is selected. This option is used in the default buttonText + and buttonTitle functions. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1644,34 +1720,36 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    nSelectedText -

    - The text displayed if more than numberDisplayed options are selected. This option is used by the default buttonText and buttonTitle callbacks. -

    - -
    - - -
    -
    +
    +
    nSelectedText +

    + The text displayed if more than numberDisplayed options are selected. This + option is used by the default buttonText and buttonTitle + callbacks. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1681,34 +1759,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    allSelectedText -

    - The text displayed if all options are selected. -

    - -
    - - -
    -
    +
    +
    allSelectedText +

    + The text displayed if all options are selected. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1718,31 +1796,31 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - This option may be useful in combination with the includeSelectAllOption: -

    - -
    - - -
    -
    +
    + +

    + This option may be useful in combination with the includeSelectAllOption: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1753,26 +1831,26 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Note that the allSelectedText is not shown if only one option is available. -

    - -
    - - -
    -
    +
    + +

    + Note that the allSelectedText is not shown if only one option is available. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1783,34 +1861,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    numberDisplayed -

    - This option is used by the buttonText and buttonTitle functions to determine of too much options would be displayed. -

    - -
    - - -
    -
    +
    +
    numberDisplayed +

    + This option is used by the buttonText and buttonTitle functions to + determine of too much options would be displayed. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1820,34 +1899,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    delimiterText -

    - Sets the separator for the list of selected items for mouse-over. Defaults to ', '. Set to '\n' for a neater display. -

    - -
    - - -
    -
    +
    +
    delimiterText +

    + Sets the separator for the list of selected items for mouse-over. Defaults to ', '. Set to + '\n' for a neater display. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1857,36 +1937,36 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    optionLabel -

    - A callback used to define the labels of the options. -

    - -
    - - -
    -
    +
    +
    optionLabel +

    + A callback used to define the labels of the options. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1906,50 +1986,51 @@ 
    Configuration Options
    
     <option value="option-6">Option 6</option>
 </select>
    -
    -
    optionClass -

    - A callback used to define the classes for the li elements containing checkboxes and labels. -

    - -
    - - -
    - -
    -
    -
    + else { + return 'odd'; + } + } + }); + }); + + +
    + +
    +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -1983,40 +2064,40 @@ 
    Configuration Options
    
     </select>
 </div>
    -
    -
    selectedClass -

    - The class(es) applied on selected options. -

    - -
    - - - -
    -
    +
    +
    selectedClass +

    + The class(es) applied on selected options. +

    + +
    + + + +
    + 
     <style type="text/css">
     #example-selectedClass-container li.multiselect-selected a label {
@@ -2032,40 +2113,41 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - includeSelectAllOption - -

    - Set to true or false to enable or disable the select all option. -

    - -

    - To see an example using both the select all option and the filter, see the documentation of the enableFiltering option. -

    - -
    - - -
    -
    +
    +
    + includeSelectAllOption + +

    + Set to true or false to enable or disable the select all option. +

    + +

    + To see an example using both the select all option and the filter, see the documentation of + the enableFiltering option. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2075,34 +2157,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - The includeSelectAllOption option can also be used in combination with optgroup's. -

    - -
    - - -
    -
    +
    + +

    + The includeSelectAllOption option can also be used in combination with optgroup's. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2112,33 +2194,34 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Note that the select all does not trigger the onChange event and only triggers the onSelectAll event: -

    - -
    - - -
    -
    +
    + +

    + Note that the select all does not trigger the onChange event and only triggers + the onSelectAll event: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2151,38 +2234,41 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - selectAllJustVisible - -

    - Setting both includeSelectAllOption and enableFiltering to true, the select all option does always select only the visible option. With setting selectAllJustVisible to false this behavior is changed such that always all options (irrespective of whether they are visible) are selected. -

    - -
    - - -
    -
    +
    +
    + selectAllJustVisible + +

    + Setting both includeSelectAllOption and enableFiltering to true, + the select all option does always select only the visible option. With setting selectAllJustVisible + to false this behavior is changed such that always all options (irrespective of + whether they are visible) are selected. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2194,37 +2280,37 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - selectAllText - -

    - The text displayed for the select all option. -

    - -
    - - -
    -
    +
    +
    + selectAllText + +

    + The text displayed for the select all option. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2235,37 +2321,39 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - selectAllValue - -

    - The select all option is added as additional option within the select. To distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option. -

    - -
    - - -
    -
    +
    +
    + selectAllValue + +

    + The select all option is added as additional option within the + select. To distinguish this option from the original options the value used for + the select all option can be configured using the selectAllValue option. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2276,29 +2364,30 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    The selectAllValue option should usually be a string, however, numeric values work as well:

    - -
    - - -
    -
    +
    + +

    The selectAllValue option should usually be a string, however, numeric values + work as well:

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2309,37 +2398,38 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - selectAllName - -

    - This option allows to control the name given to the select all option. See Server-Side Processing for more details. -

    - -
    - - -
    -
    +
    +
    + selectAllName + +

    + This option allows to control the name given to the select all option. See Server-Side + Processing for more details. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2350,37 +2440,39 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - selectAllNumber - -

    - If set to true (default), the number of selected options will be shown in parantheses when all options are seleted. The below example shows the behavior of the selectalloption with selectAllNumber set to false: -

    - -
    - - -
    -
    +
    +
    + selectAllNumber + +

    + If set to true (default), the number of selected options will be shown in + parantheses when all options are seleted. The below example shows the behavior of the + selectalloption with selectAllNumber set to false: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2391,39 +2483,41 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - onSelectAll - -

    - This function is triggered when the select all option is used to select all options. Note that this can also be triggered manually using the .multiselect('selectAll') method. -

    - -
    - - -
    -
    +
    +
    + onSelectAll + +

    + This function is triggered when the select all option is used to select all options. Note + that this can also be triggered manually using the .multiselect('selectAll') + method. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $('#example-onSelectAll').multiselect({
@@ -2434,45 +2528,46 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - enableFiltering - -

    - Set to true or false to enable or disable the filter. A filter input will be added to dynamically filter all options. -

    - -
    - - -
    -
    +
    +
    + enableFiltering + +

    + Set to true or false to enable or disable the filter. A filter + input will be added to dynamically filter all options. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2482,40 +2577,41 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - The enableFiltering option can easily be used in combination with the includeSelectAllOption option: -

    - -
    - - -
    -
    +
    + +

    + The enableFiltering option can easily be used in combination with the includeSelectAllOption + option: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2526,33 +2622,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - The enableFiltering option can also be used in combination with optgroup's. -

    -
    - - -
    -
    +
    + +

    + The enableFiltering option can also be used in combination with + optgroup's. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2562,34 +2660,35 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Clickable optgroup's are also supported: -

    -
    - - -
    -
    +
    + +

    + Clickable optgroup's are also supported: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2600,44 +2699,45 @@ 
    Configuration Options
    
     });
 </script>
    -
    - -

    - Finally, the option can also be used together with onChange or similar events: -

    -
    - - -
    -
    +
    + +

    + Finally, the option can also be used together with onChange or similar events: +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2653,45 +2753,46 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - enableCaseInsensitiveFiltering - -

    - The filter as configured above will use case sensitive filtering, by setting enableCaseInsensitiveFiltering to true this behavior can be changed to use case insensitive filtering. -

    - -
    - - -
    -
    +
    +
    + enableCaseInsensitiveFiltering + +

    + The filter as configured above will use case sensitive filtering, by setting enableCaseInsensitiveFiltering + to true this behavior can be changed to use case insensitive filtering. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2701,46 +2802,48 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - enableFullValueFiltering - -

    - Set to true to enable full value filtering, that is all options are shown where the query is a prefix of. An example is given here: #555. -

    - -
    - - -
    -
    +
    +
    + enableFullValueFiltering + +

    + Set to true to enable full value filtering, that is all options are shown where + the query is a prefix of. An example is given here: #555. +

    + +
    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2751,50 +2854,52 @@ 
    Configuration Options
    
     });
 </script>
    -
    -
    - filterBehavior - -

    - The options are filtered based on their text. This behavior can be changed to use the value of the options or both the text and the value. -

    - -
    - - -

    - In this example, the options have values from a to n. Instead of searching the text of the options, the value of the options is searched. -

    - - -
    -
    +
    +
    + filterBehavior + +

    + The options are filtered based on their text. This behavior can be changed to + use the value of the options or both the text and the value. +

    + +
    + + +

    + In this example, the options have values from a to n. Instead + of searching the text of the options, the value of the options is searched. +

    + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2821,46 +2926,46 @@ 
    Configuration Options
    
     <option value="n">Option 14</option>
 </select>
    -
    -
    - filterPlaceholder - -

    - The placeholder used for the filter input. -

    - -
    - - - -
    -
    +
    +
    + filterPlaceholder + +

    + The placeholder used for the filter input. +

    + +
    + + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2887,28 +2992,79 @@ 
    Configuration Options
    
     <option value="n">Option 14</option>
 </select>
    -
    -
    +
    +
    + enableReplaceDiacritics + +

    + Replace diacritics (ă,ş,ţ etc) with their "normal" form +

    + +
    + + + +
    +
    +
    +<script type="text/javascript">
+    $(document).ready(function() {
+        $('#example-filter-enableReplaceDiacritics').multiselect({
+            enableReplaceDiacritics: true,
+            enableCaseInsensitiveFiltering : true
+        });
+    });
+</script>
+<select id="example-filter-enableReplaceDiacritics" multiple="multiple">
+    <option value="a">Bière</option>
+    <option value="b">birrë</option>
+    <option value="c">Øl</option>
+    <option value="d">pivə</option>
+    <option value="e">Sör</option>
+</select>
+
    +
    +
    -
    -

    Templates

    -
    - - -

    - The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below: -

    - -

    - However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class .multiselect, -

    - -

    - In addition, note that other options may also have influence on the templates, for example the buttonClass option. -

    +
    +

    Templates

    +
    + + +

    + The generated HTML markup can be controlled using templates. Basically, templates are simple + configuration options. The default templates are shown below: +

    + +

    + However, note that messing with the template's classes may cause unexpected behavior. For example the + button should always have the class .multiselect, +

    + +

    + In addition, note that other options may also have influence on the templates, for example the buttonClass + option. + 

     <script type="text/javascript">
@@ -2927,40 +3083,40 @@ 
    Templates
    
     });
 </script>
    - -

    - For example other elements instead of buttons may be used by adapting the template: -

    - -
    - - - -
    -
    + }); + }); + + + +
    + 
     <script type="text/javascript">
     $(document).ready(function() {
@@ -2982,47 +3138,48 @@ 
    Templates
    
     }
 </style>
    -
    - -
    -

    Methods

    -
    +
- - - - - + + +
- .multiselect('destroy') - -

- This method is used to destroy the plugin on the given element - meaning unbinding the plugin. -

- -
-
- -
- - -
-
-
-
+
+

Methods

+
+ + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
+ .multiselect('destroy') + +

+ This method is used to destroy the plugin on the given element - meaning unbinding the + plugin. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3033,59 +3190,64 @@ 
Methods

     });
 </script>
-
-
- .multiselect('refresh') - -

- This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click 'Select some options' to select some of the options. Then click refresh. The plugin will update the checkboxes accordingly. -

- -
-
- -
- - - - -
-
-
-
+
+
+ .multiselect('refresh') + +

+ This method is used to refresh the checked checkboxes based on the currently selected + options within the select. Click 'Select some options' to select some + of the options. Then click refresh. The plugin will update the checkboxes accordingly. +

+ +
+
+ +
+ + + + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3111,55 +3273,57 @@ 
Methods

     });
 </script>
-
-
- .multiselect('rebuild') - -

- Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!). -

- -
-
- -
- - - - -
-
-
-
+
+
+ .multiselect('rebuild') + +

+ Rebuilds the whole dropdown menu. All selected options will remain selected (if still + existent!). +

+ +
+
+ +
+ + + + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3182,45 +3346,46 @@ 
Methods

     });
 </script>
-
-
- .multiselect('select', value) - -

- Selects an option by its value. Works also using an array of values. -

- -
-
- -
- - -
-
-
-
+
+
+ .multiselect('select', value) + +

+ Selects an option by its value. Works also using an array of values. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3234,41 +3399,45 @@ 
Methods

     });
 </script>
-
- -

- The method provides an additional parameter: .multiselect('select', value, triggerOnChange). If the second parameter is set to true, the method will manually trigger the onChange option. -

- -
-
- -
- - -
-
-
-
+
+ +

+ The method provides an additional parameter: .multiselect('select', value, + triggerOnChange). If the second parameter is set to true, the method will manually + trigger the onChange option. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3284,41 +3453,44 @@ 
Methods

     });
 </script>
-
- -

- The above parameter does also work when selecting multipe values. Note that onChange is called for each selected option individually! -

- -
-
- -
- - -
-
-
-
+
+ +

+ The above parameter does also work when selecting multipe values. Note that + onChange is called for each selected option individually! +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3334,45 +3506,47 @@ 
Methods

     });
 </script>
-
-
- .multiselect('deselect', value) - -

- Deselect an option by its value. Works also using an array of values. -

- -
-
- -
- - -
-
-
-
+
+
+ .multiselect('deselect', value) + +

+ Deselect an option by its value. Works also using an array of values. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3386,41 +3560,45 @@ 
Methods

     });
 </script>
-
- -

- The method provides an additional parameter: .multiselect('deselect', value, triggerOnChange). If the second parameter is set to true, the method will manually trigger the onChange option. -

- -
-
- -
- - -
-
-
-
+
+ +

+ The method provides an additional parameter: .multiselect('deselect', value, + triggerOnChange). If the second parameter is set to true, the method will manually + trigger the onChange option. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3436,41 +3614,44 @@ 
Methods

     });
 </script>
-
- -

- The above parameter does also work when deselecting multiple options. Note that onChange is called for each deselected option individually. -

- -
-
- -
- - -
-
-
-
+
+ +

+ The above parameter does also work when deselecting multiple options. Note that onChange + is called for each deselected option individually. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3486,57 +3667,64 @@ 
Methods

     });
 </script>
-
-
- .multiselect('selectAll', justVisible) - -

- Selects all options. If justVisible is set to true or not provided, all visible options are selected (when using the filter), otherweise (justVisible set to false) all options are selected. -

- -

- Note that setting justVisible to true, or providing no parameter will select all visible options, that is the dropdown needs to be opened. -

- -

- Currently, it is required to call .multiselect('updateButtonText') manually after calling .multiselect('selectAll', justVisible). -

- -
-
- -
- - - -
-
-
-
+
+
+ .multiselect('selectAll', justVisible) + +

+ Selects all options. If justVisible is set to true or not + provided, all visible options are selected (when using the filter), otherweise (justVisible + set to false) all options are selected. +

+ +

+ Note that setting justVisible to true, or providing no parameter + will select all visible options, that is the dropdown needs to be opened. +

+ +

+ Currently, it is required to call .multiselect('updateButtonText') manually + after calling .multiselect('selectAll', justVisible). +

+ +
+
+ +
+ + + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3553,57 +3741,64 @@ 
Methods

     });
 </script>
-
-
- .multiselect('deselectAll', justVisible) - -

- Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected. -

- -

- Note that setting justVisible to true, or providing no parameter will select all visible options, that is the dropdown needs to be opened. -

- -

- Currently, it is required to call .multiselect('updateButtonText') manually after calling .multiselect('selectAll', justVisible). -

- -
-
- -
- - - -
-
-
-
+
+
+ .multiselect('deselectAll', justVisible) + +

+ Deselects all options. If justVisible is set to true or not + provided, all visible options are deselected, otherweise (justVisible set to + false) all options are deselected. +

+ +

+ Note that setting justVisible to true, or providing no parameter + will select all visible options, that is the dropdown needs to be opened. +

+ +

+ Currently, it is required to call .multiselect('updateButtonText') manually + after calling .multiselect('selectAll', justVisible). +

+ +
+
+ +
+ + + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3620,60 +3815,65 @@ 
Methods

     });
 </script>
-
-
- .multiselect('updateButtonText') - -

- When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button. -

- -

- Note that usually this method is only needed when using .multiselect('selectAll', justVisible) or .multiselect('deselectAll', justVisible). In all other cases, .multiselect('refresh') should be used. -

- -
-
- -
- - - -
-
-
-
+
+
+ .multiselect('updateButtonText') + +

+ When manually selecting/deselecting options and the corresponding checkboxes, this function + updates the text and title of the button. +

+ +

+ Note that usually this method is only needed when using .multiselect('selectAll', + justVisible) or .multiselect('deselectAll', justVisible). In all other + cases, .multiselect('refresh') should be used. +

+ +
+
+ +
+ + + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3686,72 +3886,74 @@ 
Methods

     });
 </script>
-
-
- .multiselect('setOptions', options) - -

- Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild'). -

- -
- -
- - -
-
-
+ $('#example-setOptions-button').on('click', function (event) { + switch (set) { + case 2: + rebuildMultiselect(firstConfigurationSet); + + $(this).text('Configuration Set 2'); + set = 1; + break; + case 1: + default: + rebuildMultiselect(secondConfigurationSet); + + $(this).text('Configuration Set 1'); + set = 2; + break; + + } + }); + }); + +
+ + +
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3794,43 +3996,43 @@ 
Methods

     });
 </script>
-
-
- .multiselect('disable') - -

- Disable both the underlying select and the dropdown button. -

- -
-
- -
- - -
-
-
-
+
+
+ .multiselect('disable') + +

+ Disable both the underlying select and the dropdown button. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3842,43 +4044,43 @@ 
Methods

     });
 </script>
-
-
- .multiselect('enable') - -

- Enable both the underlying select and the dropdown button. -

- -
-
- -
- - -
-
-
-
+
+
+ .multiselect('enable') + +

+ Enable both the underlying select and the dropdown button. +

+ +
+
+ +
+ + +
+
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -3890,39 +4092,39 @@ 
Methods

     });
 </script>
-
-
- .multiselect('dataprovider', data) - -

- This method is used to provide options programmatically. See the example below. -

- -
-
- - -
-
-
+
+
+ .multiselect('dataprovider', data) + +

+ This method is used to provide options programmatically. See the example below. +

+ +
+
+ + +
+
+ 
 <script type="text/javascript">
     $('#example-dataprovider').multiselect();
@@ -3939,41 +4141,41 @@ 
Methods

 </script>
 <select id="example-dataprovider" multiple="multiple"></select>
-
- -

- The method is also able to handle optgroup's: -

- -
-
- - -
-
-
+
+ +

+ The method is also able to handle optgroup's: +

+ +
+
+ + +
+
+ 
 <script type="text/javascript">
     $('#example-dataprovider-optgroups').multiselect();
@@ -3998,39 +4200,42 @@ 
Methods

 </script>
 <select id="example-dataprovider-optgroups" multiple="multiple"></select>
-
-
- .multiselect('setAllSelectedText', value) - -

- This method is used to programmatically provide a new text to display in the button when all options are selected, at runtime. -

- -
-
- - - - - - -
-
-
+
+
+ .multiselect('setAllSelectedText', value) + +

+ This method is used to programmatically provide a new text to display in the button when all + options are selected, at runtime. +

+ +
+
+ + + + + + +
+
+ 
 <script type="text/javascript">
     $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
@@ -4040,50 +4245,51 @@ 
Methods

     });
 </script>
-
-
- -
-

Further Examples

-
+
+
-

- Using the onChange configuration option, the following example asks for confirmation if deselecting an option. -

+
+

Further Examples

+
-
- - -
-
+ else { + $("#example-confirmation").multiselect('select', element.val()); + } + } + } + }); + }); + + +
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4105,39 +4311,39 @@ 
Further Examples

     });
 </script>
-
- -

- The above approach can also be adapted to be used in -

+
-
- - -
-
+

+ The above approach can also be adapted to be used in +

+ +
+ + +
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4156,56 +4362,57 @@ 
Further Examples

     });
 </script>
-
- -

- Limit the number of selected options using the onChange option. The user may only select a maximum of 4 options. Then all other options are disabled. -

+
-
- - -
-
+ var dropdown = $('#example-limit').siblings('.multiselect-container'); + nonSelectedOptions.each(function () { + var input = $('input[value="' + $(this).val() + '"]'); + input.prop('disabled', true); + input.parent('li').addClass('disabled'); + }); + } + else { + // Enable all checkboxes. + var dropdown = $('#example-limit').siblings('.multiselect-container'); + $('#example-limit option').each(function () { + var input = $('input[value="' + $(this).val() + '"]'); + input.prop('disabled', false); + input.parent('li').addClass('disabled'); + }); + } + } + }); + }); + + +
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4241,60 +4448,41 @@ 
Further Examples

     });
 </script>
-
- -

- Record the order the options are selected. When selecting an item an ordering number will be incremented and saved within the option. -

- -
- -
- - -
-
-
+ + selected.sort(function (a, b) { + return a[1] - b[1]; + }); + + var text = ''; + for (var i = 0; i < selected.length; i++) { + text += selected[i][0] + ', '; + } + text = text.substring(0, text.length - 2); + + alert(text); + }); + }); + +
+ + +
+
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4383,39 +4591,40 @@ 
Further Examples

     });
 </script>
-
- -

- Simulate single selections using checkboxes. The behavior will be similar to a multiselect with radio buttons except that the selected option can be deselected again. -

- -
- - -
-
+ + $('#example-simulate-single').multiselect('deselect', values); + } + }); + }); + + +
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4436,40 +4645,40 @@ 
Further Examples

     });
 </script>
-
+
-

- Using a reset button together with a multiselect. -

- -
- -
-
- - -
-
+

+ Using a reset button together with a multiselect. +

+ +
+ +
+
+ +
-
+ +
+ 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -4497,41 +4706,43 @@ 
Further Examples

     </div>
 </form>
-
- -

- Multiselect can also be used in modals: -

- -
- - -