Merge pull request #539 from zhangguiyu/master

added delimiter option to control the delimiter character for mouse-over
davidstutz · May 25, 2015 · 26c50e2 · 26c50e2
2 parents c8351a6 + d3e9b9d
commit 26c50e2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js
@@ -223,8 +223,9 @@
                 }
                 else {
                     var selected = '';
+                    var delimiter = this.delimiter;
                     options.each(function () {
-                        selected += $(this).text() + ', ';
+                        selected += $(this).text() + delimiter;
                     });
                     return selected.substr(0, selected.length - 2);
                 }
@@ -317,6 +318,7 @@
             allSelectedText: 'All selected',
             numberDisplayed: 3,
             disableIfEmpty: false,
+            delimiter: ', ',
             templates: {
                 button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
                 ul: '<ul class="multiselect-container dropdown-menu"></ul>',

diff --git a/index.html b/index.html
@@ -453,6 +453,37 @@ <h2 id="configuration-options">Configuration Options</h2>
 </pre>
                                 </td>
                             </tr>
+                            <tr>
+                                <td><code>delimiter</code></td>
+                                <td>
+                                    <p>
+                                        Sets the separator for the list of selected items for mouse-over. Defaults to ', '. Set to '\n' for a neater display.
+                                    </p>
+
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-delimiter').multiselect({
+                                                    delimiter: '\n'
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-delimiter" multiple="multiple"></select>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-delimiter').multiselect({
+            delimiter: '\n' 
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
+                                </td>
+                            </tr>
+
                             <tr>
                                 <td><code>disableIfEmpty</code></td>
                                 <td>