我正在尝试使用Bootstrap-select插件获得9种下拉菜单。 下拉列表显示在三列中。 每个下拉列表都有一个标签。 每个下拉列表都有一个擦除按钮（input-group-btn）。 您可以为下拉列表选择多个选项。
现在，当我在左下拉列表中选择许多选项时，选项列表会溢出右下角的标签。
是否可以切断选项列表，以便除了下拉列表之外的所有内容都可见？ 我认为选项“dropdown-align-right”可以完成这项工作，但似乎在我的例子中不起作用。
我使用bootstrap 3.3.7，bootstrap-select 1.12.1和jquery 1.9.1。
以下是代码：
`<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_1" name="select_1" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_2" name="select_2" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_3" name="select_3" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_4" name="select_4" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_5" name="select_5" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_6" name="select_6" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_7" name="select_7" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_8" name="select_8" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_9" name="select_9" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>`
答案 0 :(得分：0)
在我母亲的帮助下，我找到了解决问题的方法。 我没有成功削减选项列表。相反，我添加了一个自定义文本，显示第一个选项，后跟“...”。
首先，我在输入组中添加了id，并设置了data-container属性，以便在选择越来越多的选项时，下拉列表会保留在列中。
其次，我添加了一些javascript来设置selectedTextFormat和countSelectedText属性，以便在选择多个选项时显示第一个选项，后跟“...”。
请参阅以下代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectpicker").each(function() {
var self = this;
$(self).selectpicker({
"selectedTextFormat": "count>1",
"countSelectedText": function(count,total) {
return $(self).val()[0] + " ...";
}
});
}); // end each
}); // end ready
</script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div id="select_1_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_1_container" id="select_1" name="select_1" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div id="select_2_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_2_container" id="select_2" name="select_2" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div id="select_3_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_3_container" id="select_3" name="select_3" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div id="select_4_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_4_container" id="select_4" name="select_4" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div id="select_5_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_5_container" id="select_5" name="select_5" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div id="select_6_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_6_container" id="select_6" name="select_6" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div id="select_7_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_7_container" id="select_7" name="select_7" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div id="select_8_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_8_container" id="select_8" name="select_8" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div id="select_9_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_9_container" id="select_9" name="select_9" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>