Bootstrap Selectpicker - Hide select box and always show drop down

Question

I have a select element and I need this always open (dropdown) without the select box.

<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/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

I got like this. But still, it shows some kind of bugs.
Does any one have better answer?

$(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/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>