Bootstrap Selectpicker - 隐藏选择框并始终显示下拉菜单答案

【问题标题】：Bootstrap Selectpicker - Hide select box and always show drop downBootstrap Selectpicker - 隐藏选择框并始终显示下拉菜单
【发布时间】：2019-07-09 07:13:09
【问题描述】：

我有一个 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>

【问题讨论】：

检查我的答案。有没有更好的选择？

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

【解决方案1】：

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

【讨论】：

它不适用于新应用程序。在现有应用程序上，它使用bootstrap selectpicker 实现

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：