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下拉选中的内容中断多于一行

回答

相关问题