Bootstrap 选择器 - 隐藏 select 框并始终显示下拉列表

Question

我有一个 select 元素，我需要在没有 select 框的情况下始终打开（下拉）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select name="subjectFilter[]" class="selectpicker" multiple="multiple" id="subjectFilter">
  <option value="1">Anatomy</option>
  <option value="2">Anesthesia</option>
  <option value="3">Biochemistry</option>
  <option value="4">Community Medicine</option>
  <option value="5">Dermatology</option>
  <option value="6">ENT</option>
  <option value="7">Forensic Medicine</option>
  <option value="8">Gynecology</option>
  <option value="9">Medicine</option>
  <option value="10">Microbiology</option>
  <option value="1431">NCERT Class X Mathematics</option>
  <option value="11">Obstetrics</option>
  <option value="13">Ophthalmology</option>
  <option value="14">Orthopedics</option>
  <option value="15">Pathology</option>
  <option value="16">Pediatrics</option>
  <option value="17">Pharmacology</option>
  <option value="18">Physiology</option>
  <option value="19">Psychiatry</option>
  <option value="1409">Radiology</option>
  <option value="21">Radiotherapy</option>
  <option value="23">Surgery</option>
  <option value="1408">Anaesthesia</option>
</select>

Answer 1

我认为您应该尝试 Select2，因为这是 ComboBox 的最佳插件这是 Alejandro 提供的 Fiddle 希望它对您有所帮助 Fiddle

Answer 2

你是说属性大小？ https://www.w3schools.com/tags/att_select_size.asp 希望有帮助

Answer 3

考虑到 toggle 方法不能马上生效，需要使用 refresh 来绑定数据，这显然有点棘手，请查看以下内容：

$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('toggle');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select name="subjectFilter[]" class="selectpicker" multiple="multiple" id="subjectFilter">
  <option value="1">Anatomy</option>
  <option value="2">Anesthesia</option>
  <option value="3">Biochemistry</option>
  <option value="4">Community Medicine</option>
  <option value="5">Dermatology</option>
  <option value="6">ENT</option>
  <option value="7">Forensic Medicine</option>
  <option value="8">Gynecology</option>
  <option value="9">Medicine</option>
  <option value="10">Microbiology</option>
  <option value="1431">NCERT Class X Mathematics</option>
  <option value="11">Obstetrics</option>
  <option value="13">Ophthalmology</option>
  <option value="14">Orthopedics</option>
  <option value="15">Pathology</option>
  <option value="16">Pediatrics</option>
  <option value="17">Pharmacology</option>
  <option value="18">Physiology</option>
  <option value="19">Psychiatry</option>
  <option value="1409">Radiology</option>
  <option value="21">Radiotherapy</option>
  <option value="23">Surgery</option>
  <option value="1408">Anaesthesia</option>
</select>

Answer 4

我是这样的。但是，它仍然显示出一些错误。
有没有人有更好的答案？

$(document).ready(function () {
 $('.selectpicker').selectpicker('refresh');
 $('.selectpicker').selectpicker('toggle');

 $(".selectpicker").on("changed.bs.select, shown.bs.select", function () {
  console.log('chnage');
  $('.btn').css('display', 'none')
 });


 $(".selectpicker").on("hidden.bs.select", function () {
  console.log('sadf');
  var name = $(this).attr("id");
  $("#" + name).selectpicker("toggle");
  $('.btn').css('display', 'none')

 });
});

button.btn.dropdown-toggle.btn-default.bs-placeholder{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select name="subjectFilter[]" class="selectpicker" multiple="multiple" id="subjectFilter">
  <option value="1">Anatomy</option>
  <option value="2">Anesthesia</option>
  <option value="3">Biochemistry</option>
  <option value="4">Community Medicine</option>
  <option value="5">Dermatology</option>
</select>

Bootstrap 选择器 - 隐藏 select 框并始终显示下拉列表

Bootstrap Selectpicker - Hide select box and always show drop down

javascript

jquery

twitter-bootstrap

bootstrap-select

bootstrap-selectpicker