How to display title in Bootstrap-Select without empty element ? - GeeksforGeeks

09 Apr, 2021
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 collapsable 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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"        rel="stylesheet" />    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css"        rel="stylesheet" />    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"        rel="stylesheet" />    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css"        rel="stylesheet" />    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"        rel="stylesheet" />    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css"        rel="stylesheet" />    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js">    </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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
HTML-Attributes
HTML-Questions
HTML-Tags
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to change the background color of the active nav-item?
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property