Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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


My Personal Notes arrow_drop_up
Last Updated : 11 Nov, 2022
Like Article
Save Article
Similar Reads
Related Tutorials