title: how to display selected value as coma separator in button in bootstrap multi select drop down?
body: <p>I am using jquery multi-select drop down in my project. I have a drop down with maximum 4 value and if I select a value from the drop-down it is displaying as '3 selected', '4 selected' as bellow image, but I want to display all selected value as coma separate instead of '4 selected'. I am using <code>/bootstrap-multiselect.js</code></p>
  
  <p><a href="https://i.stack.imgur.com/L0eUs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L0eUs.png" alt="enter image description here"></a></p>
  
  <p>I am generating dropdown dynamically as bellow html code,</p>
  
  <pre><code>                @if (ds.Tables.Count &gt; 0)
              {
                  int i = 1;
                  foreach (DataRow categogyItem in ds.Tables[0].Rows)
                  {
  
  
     &lt;div class="ibvm subhselectfildwrap"&gt;
  
                                  &lt;select class="listbox selectpicker" id=@string.Format("ddlEmail{0}", i) multiple="multiple" name="@string.Format("Email{0}", i)" style="width: 500px !important;"&gt;
  
                                      @if (ds.Tables.Count &gt; 2)
                                      {
                                          foreach (DataRow EmailItem in ds.Tables[2].Rows)
                                          {
  
                                              if (NC.ToInt(EmailItem["IN00_01_InBoxId"]) == NC.ToInt(categogyItem["InBoxId"]))
                                              {
                                                  &lt;option value="@EmailItem["IN00_01_DetailID"]"&gt;@EmailItem["IN00_01_EmailId"]&lt;/option&gt;
  
                                              }
  
                                          }
                                      }
  
                                  &lt;/select&gt;
  
                              &lt;/div&gt;
  
                                      i++;
                  }
              }
  </code></pre>
  
  <p>in the js file, I have created code as bellow, when I check this code while putting <code>Debugger</code> in js it's working properly and button text has been changed with selected coma separator value but after then js has been called and value has been changed as '4 selected'. </p>
  
  <p>I have referred <a href="https://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title">sample question</a> also. but I can not able to find the solution.</p>
  
  <pre><code>        $('.selectpicker').multiselect({
          enableFiltering: false,
          includeSelectAllOption: true,
          selectAllJustVisible: false,
          enableCaseInsensitiveFiltering: true,
          buttonWidth: '100%'
      });
  
      $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
              str += $(this).text() + ", ";
          });
  
          $(this).parent('.subhselectfildwrap').find('div.btn-group').find('span.multiselect-selected-text').text(str);
  
      })
    .trigger("change");
  </code></pre>
  
  <p><strong>Edit:</strong> </p>
  
  <p>I am using '<a href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" rel="nofollow noreferrer">http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js</a>'</p>