如何在没有空元素的情况下在 Bootstrap-Select 中显示标题？

在本文中，我们将介绍如何在 Bootstrap-Select 中显示标题，而在选择下拉菜单中没有任何空元素。 Bootstrap Select 是一个表单控件，它显示可以选择的不同值的可折叠列表。这可用于向用户显示表单或菜单。

示例 1：在第一个选项标签中使用 data-hidden 属性来隐藏列表视图中的项目。这会将第一个数据设置为隐藏，同时，我们可以在标题中看到它。

HTML

  

    
    
    
    
    
    
    
    

  

    
  
    
        Choose Option
    
    First
    Second
    Third
  

  

输出：

根据要求设置标题没有空元素

示例 2：使用 multiple 选项，在 select 标签中选择属性并将 data-max-attribute 限制为 1。此后，我们根据我们的要求设置 title 属性。

HTML

  

    
    
    
    
    
    
    
    

  

    
    First
    Second
    Third
  

  

输出：

根据要求设置标题没有空元素

示例 3：使用 CSS 隐藏第一个选项并根据我们的要求设置标题。

HTML

  

    
    
    
    
    
    
    
    
  
    
        .bootstrap-select ul.dropdown-menu li:first-child {
            display: none;
        }
    

  

    
    
    
    First
    Second
    Third
  

  

输出：

根据要求设置标题没有空元素