如何使用多个引导选择显示所有选定的选项？答案

【问题标题】：How to display all selected options using multiple bootstrap-select?如何使用多个引导选择显示所有选定的选项？
【发布时间】：2014-09-23 20:12:15
【问题描述】：

我正在使用 silviomore 来引导选择。这是文档http://silviomoreto.github.io/bootstrap-select/ 的链接在几个选择选项上，我正在使用多项选择，我遇到了下一个问题。

如果选择了更多选项，则它们不适合选择输入。像这样 (screenshot example) 。有没有什么方法可以让输入框扩展高度并显示用户选择的所有内容？我也尝试更改 css

.bootstrap-select.btn-group .btn .filter-option {
   display: inline-block;
   width: 100%;
   float: left;
   text-align: left;
   color: #333 !important;
   text-transform: uppercase;
   overflow: visible;
   height: 150px;
}

但这也没有用。

提前致谢！

【问题讨论】：

比如this

标签： javascript jquery twitter-bootstrap select bootstrap-select

【解决方案1】：

您必须将此行添加到 .btn 的 css 中：white-space: normal;

.bootstrap-select .btn {
    white-space: normal;
}

然后你必须设置正确的初始宽度、填充和东西。希望这行得通。

【讨论】：

【解决方案2】：

此页面上的所有解决方案都不适合我。我最终编写了一些 jQuery 代码来处理它。这是它，以防它帮助其他人！

$(document).ready(function(){
  $('#my_select').on('loaded.bs.select hidden.bs.select', function(){ 
    $(this).parent('.bootstrap-select').css('height','auto');
    $(this).next('.btn').css('overflow','hidden').height($(this).next('.btn').find('.filter-option-inner').height()); 
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>

<select id="my_select" class="form-control selectpicker" multiple data-multiple-separator="<br>">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
</select>

结果是：

Multiple Selected Options Shown

【讨论】：

【解决方案3】：

我认为您想使用多选而不是选择。

   <select class="selectpicker" multiple title='Choose one of the following...'>
         <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
      </select>

如果您希望选择框的宽度随着选择而增加，您可以根据 div.bootstrap-select 类设置动态宽度。

【讨论】：

我正在使用上面写的多个。问题是它没有显示用户选择的所有内容。我想知道是否有办法显示所有内容。
你能不能只添加 width:100% 到 div.bootstrap-select
是的，这是可能的，但我需要身高。例如，如果用户选择 10 个国家/地区，则宽度太大。它不适合设计。 ://