可以将select-size-attribute与bootstrap-select结合使用吗？

Question

..。如果是这样，又是如何做到的呢？我有一个带有size属性的select元素，即

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<select class="form-control" size="5">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
  <option>Ketchup</option>
</select>

​

现在我想向选项中添加一些进一步的信息- bootstrap-select可以完成这项工作，但它忽略了select-size-attribute/throws错误：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<select size="5" class="selectpicker" data-show-subtext="true">
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Mustard">Mustard</option>
  <option data-subtext="Ketchup">Ketchup</option>
  <option data-subtext="Barbecue">Barbecue</option>
  <option data-subtext="Ketchup">Ketchup</option>
</select>

​

编辑:我忘了说我知道'data-size‘属性--当然这是可行的，但是我仍然有一个下拉列表。我实现的是像我的第一个例子一样拥有一个框，但是像第二个例子一样有'styled‘选项元素。

如果无法使用bootstrap-select完成此工作，则欢迎使用其他方法。

Answer 1

您可以使用多选来获得类似的结果。

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<select class="custom-select form-control" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="3">Three</option>
</select>

​

Answer 2

您可以使用data-size而不是size，也可以添加以下内容。

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select size="5" class="selectpicker" data-show-subtext="true">
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Mustard">Mustard</option>
<option data-subtext="Ketchup">Ketchup</option>
<option data-subtext="Barbecue">Barbecue</option>
<option data-subtext="Ketchup">Ketchup</option>

​

<script>
  $('.selectpicker').selectpicker();
</script>