En este artículo, cubriremos cómo mostrar el título en Bootstrap-Select sin ningún elemento vacío en el menú desplegable de selección. Bootstrap Select es un control de formulario que muestra una lista plegable de diferentes valores que se pueden seleccionar. Esto se puede utilizar para mostrar formularios o menús al usuario.
Ejemplo 1: usar el atributo de datos ocultos en la primera etiqueta de opción para ocultar el elemento en la vista de lista. Esto establece que los primeros datos se oculten y, al mismo tiempo, podemos verlos en el título.
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>
Producción:
Configuración del título según el requisito sin el elemento vacío
Ejemplo 2: usando la opción múltiple, seleccione el atributo en la etiqueta de selección y limitando el atributo data-max-attribute a 1. Después de esto, establecemos la propiedad del título según nuestros requisitos.
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>
Producción:
Configuración del título según el requisito sin el elemento vacío
Ejemplo 3: usar CSS para ocultar la primera opción y configurar el título según nuestro requisito.
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>
Producción:
Configuración del título según el requisito sin el elemento vacío
Publicación traducida automáticamente
Artículo escrito por deveshkumarsharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA