Question

...，如果是，怎么办？我有一个选择元素和一个尺寸属性，即

<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'属性-当然可以，但是我仍然有一个下拉列表。我实现的是在第一个示例中具有一个框，但在第二个示例中具有“样式化”的选项元素。

如果使用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>

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

2 个答案: