Skip to content
Related Articles

Related Articles

How to display title in Bootstrap-Select without empty element ?
  • Last Updated : 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=
        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
Recommended Articles
Page :