如何在bootstrap多選下拉菜單中按鈕中顯示選定值作爲彗星分隔符？

我在我的項目中使用jQuery多選下拉菜單。我有一個最大值爲4的下拉菜單，如果我從下拉菜單中選擇一個值，它將顯示爲'3 selected'，'4 selected'作爲波紋管圖像，但是我想將所有選定的值顯示爲彗形值而不是'4選'。我使用/bootstrap-multiselect.js如何在bootstrap多選下拉菜單中按鈕中顯示選定值作爲彗星分隔符？

我動態生成下拉爲波紋管的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" [email protected]("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++; 
       } 
      }

在js文件

，我已經創建的代碼爲波紋管，當我檢查這個代碼，而把Debugger在JS中它正常工作，並且按鈕文本已經被選中的彗星分隔符值改變了，但之後js被調用並且值被改變爲'4 selected'。

我也參考了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」

來源

2017-09-28 alka vaghela

哪個多選的jQuery插件你使用，你能添加的那個鏈接？ –

bootstrap-multiselect。js選項顯示的默認值爲3，在選擇3個值後顯示4選中，等等。http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-numberDisplayed。 –

@AmitKumar我已編輯quetion並添加了我正在使用的js的鏈接。 –

，因爲它是默認的行爲來引導多選擇下拉，所以如果你需要顯示所有的標籤，而不是數量，那麼你需要修改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;}

在這裏，你還需要設置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

來源

2017-09-28 08:31:45

如何在bootstrap多選下拉菜單中按鈕中顯示選定值作爲彗星分隔符？

回答

相關問題