Bootstrap Selectpicker - Скрыть окно выбора и всегда показывать выпадающий список

Question

У меня есть элемент 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

Я получил вот так. Но, тем не менее, он показывает какие-то ошибки.
У кого-нибудь есть лучший ответ?

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

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

Думаю, вам стоит попробовать Select2, так как это лучший плагин для ComboBox Вот скрипка с Алехандро. Надеюсь, она поможет Fiddle