Add 'multiVerbosity' option

Author: Tom Doan

README.md

@@ -60,7 +60,8 @@ Name                | Type     | Default      | Description
 `customClass`       | string   | arrow        | The class name to customize the drop-down menu style. The default `arrow` class displays a chevron-type arrow icon. Two additional helper classes are built in (add either or both to `arrow`): `triangle` converts the chevron into a solid triangle; `small` renders the arrow icon at half size.
 `height`            | number   | 50           | The drop-down menu item height. The minimum value is 8. Note that the maximum number of items displayed when the menu is opened is determined by the `size` attribute of the `<select>` element.
 `hoverIntent`       | number   | 200          | The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. If you hover back onto the menu within the wait period, it will remain open. The minimum value is 0.
-`multiDelimiter`    | string   | ;            | The separator character to use for the list of selected values in a multi-select menu.
+`multiDelimiter`    | string   | ;            | The separator character to use for the list of selected items in a multi-select menu.
+`multiVerbosity`    | number   | 99           | The maximum number of selected items to display in a multi-select menu before replacing it with a summary (e.g., "2/3 selected"). To display "0/3 selected" instead of "None selected", set this option to -1.
 `selectedMarker`    | string   | **&#10003;** | The icon or symbol to mark that an item is selected. HTML is accepted (e.g., `<i class="fa fa-check"></i>`).
 `afterLoad`         | function |              | Callback function to execute after the drop-down menu widget is loaded.
 

dist/js/jquery.prettydropdowns.js

@@ -16,6 +16,7 @@
       height: 50,
       hoverIntent: 200,
       multiDelimiter: '; ',
+      multiVerbosity: 99,
       selectedMarker: '✓',
       afterLoad: function(){}
     }, oOptions);
@@ -24,6 +25,12 @@
     // Validate options
     if (isNaN(oOptions.height) || oOptions.height<8) oOptions.height = 8;
     if (isNaN(oOptions.hoverIntent) || oOptions.hoverIntent<0) oOptions.hoverIntent = 200;
+    if (isNaN(oOptions.multiVerbosity)) oOptions.multiVerbosity = 99;
+
+    // Translable strings
+    var MULTI_NONE = 'None selected',
+      MULTI_PREFIX = 'Selected: ',
+      MULTI_POSTFIX = ' selected';
 
     // Globals
     var $current,
@@ -441,11 +448,14 @@
       // Update selected values for multi-select menu
       updateSelected = function($dropdown) {
         var $select = $dropdown.parent().children('select'),
-          sSelected = $('option', $select).map(function() {
+          aSelected = $('option', $select).map(function() {
             if (this.selected) return this.text;
-          }).get().join(oOptions.multiDelimiter);
+          }).get(),
+          sSelected;
+        if (oOptions.multiVerbosity>=aSelected.length) sSelected = aSelected.join(oOptions.multiDelimiter) || MULTI_NONE;
+        else sSelected = aSelected.length + '/' + $('option', $select).length + MULTI_POSTFIX;
         if (sSelected) {
-          var sTitle = ($select.attr('title') ? $select.attr('title') + '\n' : '') + 'Selected: ' + sSelected;
+          var sTitle = ($select.attr('title') ? $select.attr('title') : '') + (aSelected.length ? '\n' + MULTI_PREFIX + aSelected.join(oOptions.multiDelimiter) : '');
           $dropdown.children('.selected').text(sSelected);
           $dropdown.attr({
             'title': sTitle,