How to display title in Bootstrap-Select without empty element ?
Last Updated :
11 Nov, 2022
In this article, we will cover how to display the title in the Bootstrap-Select without any empty element in the select dropdown menu. Bootstrap Select is a form control that displays a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.
Example 1: Using data-hidden attribute in the first option tag to hide the item in the list view. This sets the first data to be hidden and at the same time, we get to see it in the title.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<link href=
rel="stylesheet" />
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<select class="selectpicker"
title="Pick One">
<option data-hidden="true">
Choose Option
</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</body>
</html>
|
Output:
Setting title as per requirement without the empty element
Example 2: Using the multiple option, select attribute in the select tag and limiting the data-max-attribute to 1. After this, we set the title property as per our requirements.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<link href=
rel="stylesheet" />
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<select class="selectpicker"
multiple data-max-options="1"
title="Choose Option">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</body>
</html>
|
Output:
Setting title as per requirement without the empty element
Example 3: Using CSS to hide the first option and setting the title as per our requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<link href=
rel="stylesheet" />
</script>
<script src=
</script>
<script src=
</script>
<style>
.bootstrap-select ul.dropdown-menu li:first-child {
display: none;
}
</style>
</head>
<body>
<br>
<select class="selectpicker"
title="Choose Option">
<option></option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</body>
</html>
|
Output:
Setting title as per requirement without the empty element
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...