我正在使用 bootstrap 多选下拉列表并在下拉列表中显示所有选定的值。但现在我有很多值(value)观,所以我想把它分成不止一行。现在我喜欢下图中的它。
查看选择组选项我希望所选内容分成多行。我有以下 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>
请帮助我。
最佳答案
你可能想用
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>
关于javascript - bootstrap multiselect dropdown selected content break in more than one 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44516840/