Question

我正在使用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>

请帮帮我。

Answer 1

您可能想要使用

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>

Answer 2

您可以使用以下CSS设置实现此目的：

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

white-space:normal让按钮内的文字再次换行，并使用max-width设置按钮应增长的最大宽度。

请参阅此JSFiddle。

恕我直言，无法使用buttonText分隔线条，例如插入<br/>。您可以从source code bootstrap-multiselect中看到updateButtonText中buttonText的结果是使用jQuery的html()方法插入的，因此<br/>转换为<br/> 127.0.0.1 - kibanaadmin [13/Jun/2017:14:18:17 +0530] "GET /ui/favicons/favicon-32x32.png HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0"。

bootstrap multiselect dropdown选择的内容在多行中断

2 个答案: