부트 스트랩 멀티 선택 드롭 다운에서 버튼에 코마 구분 기호로 선택된 값을 표시하는 방법은 무엇입니까?

Question

내 프로젝트에서 jquery multi-select 드롭 다운을 사용하고 있습니다. 최대 4 값으로 드롭 다운이 있고 드롭 다운에서 값을 선택하면 '3 선택됨', '4 선택됨'이미지로 표시되지만 모든 선택 값을 쉼표 대신 별도로 표시하려고합니다. '4 선택됨'. 나는 Debugger 퍼팅하는 동안이 코드를 검사 할 때 JS 파일에

   @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++; 
       } 
      } 

, 나는, 울부 짖는 소리와 같은 코드를 만들었습니다, 나는 동적으로 울부 짖는 HTML 코드를 드롭 다운 메뉴를 생성하고 /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

를 사용하여, 그래서하고 buttontext를 수정해야합니다.

여기서는 모든 변경 이벤트의 버튼 텍스트를 업데이트했습니다. 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;} 

당신은 또한 설정 - 버튼 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