bootstrap multiselect下拉選中的內容中斷多於一行

我使用引導多選下拉菜單並在下拉菜單中顯示所有選定的值。但現在我有很多值，所以我想在多行中打破它。現在我喜歡它在下面的圖片。bootstrap multiselect下拉選中的內容中斷多於一行

看到我想選定內容在更多然後一個換行符，選擇組選項。我有以下jQuery代碼。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#fk_group_id').multiselect({ 
     includeSelectAllOption: true, 
     enableFiltering: true, 

     buttonText: function(options, select) { 
     if (options.length == 0) { 
      return 'Select Groups'; 
     } 
     else { 
      var selected = ''; 
      options.each(function() { 
       selected += $(this).text() + ', '; 
      }); 
      return selected.substr(0, selected.length -2); 
     } 
    }, 
    }); 
    $('.btn-group').css({"min-width":"35%"}); 
}); 
</script>

請幫幫我。

來源

2017-06-13 Divyesh Jesadiya

您可能需要使用

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js

添加這個CSS打破選擇

.multiselect-selected-text{ 
    display: inline-block; 
    max-width: 100%; 
    word-break: break-all; 
    white-space: normal; 
}

代碼片段

$(document).ready(function() { 
 
     $('#example-getting-started').multiselect({ 
 
     includeSelectAllOption: true, 
 
     enableFiltering: true, 
 

 
     buttonText: function(options, select) { 
 
     if (options.length == 0) { 
 
      return 'Select Groups'; 
 
     } 
 
     else { 
 
      var selected = ''; 
 
      options.each(function() { 
 
       selected += $(this).text() + ', '; 
 
      }); 
 
      return selected.substr(0, selected.length -2); 
 
     } 
 
    }, 
 
    }); 
 
    });

.multiselect-selected-text{ 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    word-break: break-all; 
 
    white-space: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 
<!-- Build your select: --> 
 
<select id="example-getting-started" 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="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="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> 
 
</select>

來源

2017-06-13 09:08:52

我正在使用，只有....並且我問任何選項是否有在另一行選項中打破選定的值。在上面的圖片中我選擇了全部選項。 –

@DivyeshJesadiya檢查更新 –

現在我怎麼能讓它從php更新選擇更新頁面...我嘗試選擇選項，但不工作。 –

你可以用下面的CSS設置實現這一目標：

.multiselect { 
    white-space: normal !important; 
    max-width: 200px; 
}

white-space:normal讓按鈕中的文本再次換行，並與max-width可以設置按鈕應該長到最大寬度。

看到這個JSFiddle。

恕我直言，這是不可能打破使用buttonText，例如，通過插入<br/>。您可以從source code的bootstrap-multiselect中看到，在updateButtonText中，使用jQuery的html()方法插入buttonText的結果，因此<br/>轉換爲<br/>。

來源

2017-06-13 09:47:15 gus27

bootstrap multiselect下拉選中的內容中斷多於一行

回答

相關問題