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

时间：2019-07-09 07:13:09

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

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

4 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

答案 2 :(得分：0)

显然，考虑到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>

答案 3 :(得分：0)

我这样。但仍然显示出一些错误。
有谁有更好的答案吗？

$(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>

相关问题
最新问题