どのように選択した値をブートストラップのボタンの昏睡区切り記号として表示するかマルチ選択ドロップダウン？

Question

私のプロジェクトでは、jquery multi-selectドロップダウンを使用しています。私は最大4値でドロップダウンしています。ドロップダウンから値を選択すると、 '3選択'、 '4選択'が表示されますが、選択したすべての値を'4選択'私はこのコードをチェックしたときにDebuggerを入れながら、私は、怒鳴るようなコードを作成している、JSファイルで、私は怒鳴るHTMLコードとして動的にドロップダウンを生成しています

   @if (ds.Tables.Count > 0) 
      { 
       int i = 1; 
       foreach (DataRow categogyItem in ds.Tables[0].Rows) 
       { 


    <div class="ibvm subhselectfildwrap"> 

           <select class="listbox selectpicker" id=@string.Format("ddlEmail{0}", i) multiple="multiple" name="@string.Format("Email{0}", i)" style="width: 500px !important;"> 

            @if (ds.Tables.Count > 2) 
            { 
             foreach (DataRow EmailItem in ds.Tables[2].Rows) 
             { 

              if (NC.ToInt(EmailItem["IN00_01_InBoxId"]) == NC.ToInt(categogyItem["InBoxId"])) 
              { 
               <option value="@EmailItem["IN00_01_DetailID"]">@EmailItem["IN00_01_EmailId"]</option> 

              } 

             } 
            } 

           </select> 

          </div> 

            i++; 
       } 
      } 

を/bootstrap-multiselect.js

を使用していますjsで正しく動作しており、ボタンのテキストが選択された桁区切りの値で変更されましたが、その後はjsが呼び出され、値が '4選択'として変更されました。

sample questionも参照しました。私は解決策を見つけることができません。

 $('.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"); 

編集：

あなたは、複数選択ドロップダウンをブートストラップするためのデフォルトの動作であるので、私は「http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js」

Answer 1

を使用しています、だからではなく、カウントのすべてのラベルを表示する必要がある場合ボタンテキストを変更する必要があります。

ここでは、すべての変更イベントのボタンテキストを更新しました。 HTML：

<div class="form-group"> 
    <div class="col-md-4"> 
     <select id="test" class="multiselect-ui form-control" multiple="multiple"> 
      <option value="cheese">Cheese</option> 
      <option value="tomatoes">Tomatoes</option> 
      <option value="mozarella">Mozzarella</option> 
      <option value="mushrooms">Mushrooms</option> 
      <option value="pepperoni">Pepperoni</option> 
      <option value="onions">Onions</option> 
      <option value="mozarella1">Mozzarella</option> 
      <option value="mushrooms1">Mushrooms</option> 
      <option value="2pepperoni">Pepperoni</option> 
      <option value="3onions">Onions</option> 
     </select> 
    </div> 
</div> 

JS：

$('#test').multiselect({ 
    includeSelectAllOption: true, 
    maxHeight: 150, 
    buttonWidth: 'auto', 
    numberDisplayed: 2, 
    nSelectedText: 'selected', 
    nonSelectedText: 'None selected', 
    buttonText: function(options, select) { 
     var numberOfOptions = $(this).children('option').length; 
     if (options.length === 0) { 
      return this.nonSelectedText + ''; 
     } else { 
      var selected = ''; 
      options.each(function() { 
       var label = ($(this).attr('label') !== undefined) ? 
        $(this).attr('label') : $(this).html(); 
       selected += label + ', '; 
      }); 
      return selected.substr(0, selected.length - 2) + ''; 

     } 
    } 
}); 

CSS：ここ

.btn-block {width : auto !important;} 

あなたはまた、設定buttontext widthプロパティする必要がauto

JSFiddle Method 1

これを達成する別の方法。

• 合計オプション数を取得します。

• すべてのオプションテキストを取得します。

• 次に、プラグイン設定プロパティを使用します。ご使用のプラグイン

のJsコード

var total = $('#test option').length; 
var options = $('#test option'); 

var allText = $.map(options ,function(option) { 
    return option.value; 
}).join(','); 

$('#test').multiselect({numberDisplayed: total,allSelectedText : allText}); 

JsFiddle Method 2