twitter-bootstrap - sencillo - menus desplegables en php
Bootstrap 3 menú desplegable seleccionar (7)
Estamos intentando volver a implementar nuestro formulario de registro con bootstrap. Nuestro formulario de registro contiene una lista desplegable que representa un tipo de empresa. He buscado mucho en línea, pero no veo ningún ejemplo en el que un formulario sea un menú desplegable.
Bootstrap ofrece un montón de ejemplos de menús desplegables relacionados con diversas acciones, pero lo que necesito es una entrada desplegable. He encontrado dos soluciones:
Primero:
<label>Type of Business</label>
<select class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
Aquí hay un problema: aunque el cuadro en sí tiene un estilo correcto, el menú desplegable en sí no tiene estilos aplicados.
Segunda versión:
<div class="btn-group">
<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
Select Business type <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">small</a></li>
<li><a href="#">medium</a></li>
<li><a href="#">large</a></li>
</ul>
</div>
Este se ve bien:
pero es un botón. Cuando se selecciona una opción, no quiero realizar ninguna acción, todo lo que deseo es cambiar el texto y vincular la selección con un campo de entrada correspondiente.
Ambos enfoques parecen ser una opción incorrecta para mi acción. Me niego a creer que Bootstrap no contenga un solo componente de selección simple desplegable vinculado a un campo de entrada.
Qué me estoy perdiendo ? Por favor ayuda.
Acabamos de cambiar nuestro sitio a bootstrap 3 y tenemos muchas formas ... no fue divertido, pero una vez que se da cuenta no es tan malo.
¿Es esto lo que estás buscando? Demo aquí
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
<div class="col-sm-6 col-md-4">
<select id="company" class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
</div>
</div>
He estado buscando un buen menú desplegable de selección desde hace algún tiempo y encontré uno bueno. Así que lo dejaré aquí. Se llama bootsrap-select
here''s el enlace. Echale un vistazo. tiene listas desplegables editables, desplegables combinados y más. Y es muy fácil de agregar a su proyecto.
Si el enlace se acaba, solo busca el programa de arranque: selecciona silviomoreto.github.io. Esto es mejor porque es una etiqueta de selección normal
La lista desplegable que aparece así depende de lo que sea su navegador, ya que no es posible modificar esto para algunos. Parece que el tuyo es IE9, pero se vería bastante diferente en Chrome.
Podrías buscar usar algo como esto:
Lo que hará que sus selectboxes sean más consistentes en el navegador cruzado.
Me gustaría extender la respuesta de paulalexandru y poner aquí la solución completa que funciona generalmente con las listas desplegables de arranque y actualizar el contenido del botón principal y también el valor de la opción seleccionada.
El menú desplegable de arranque se define de esta manera:
<div class="btn-group" role="group">
<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
Option 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-value="1">Option 1</a></li>
<li><a href="#" data-value="2">Option 2</a></li>
<li><a href="#" data-value="3">Option 3</a></li>
</ul>
</div>
Adicional al código desplegable de arranque estándar, existe data-value atributo de data-value para almacenar los valores en cada opción desplegable (en el elemento <a> ).
Ahora el código JS. Creé una función que maneja los menús desplegables:
function dropdownToggle() {
// select the main dropdown button element
var dropdown = $(this).parent().parent().prev();
// change the CONTENT of the button based on the content of selected option
dropdown.html($(this).html() + '' </i><span class="caret"></span>'');
// change the VALUE of the button based on the data-value property of selected option
dropdown.val($(this).prop(''data-value''));
}
Y, por supuesto, necesitamos agregar el agente de escucha de eventos:
$(document).ready(function(){
$(''.dropdown-menu a'').on(''click'', dropdownToggle);
}
Prueba esto:
<div class="form-group">
<label class="control-label" for="Company">Company</label>
<select id="Company" class="form-control" name="Company">
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</select>
</div>
Si desea lograr this simplemente mantenga el botón desplegable y estilo como el cuadro de selección. El código está here y abajo.
.btn {
cursor: default;
background-color: #FFF;
border-radius: 4px;
text-align: left;
}
.caret {
position: absolute;
right: 16px;
top: 16px;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #FFF;
}
.btn-group.open .dropdown-toggle {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}
.btn-group {width: 100%}
.dropdown-menu {width: 100%;}
Para hacer que el botón funcione como un cuadro de selección, todo lo que necesita agregar es este pequeño código de JavaScript:
$(''.dropdown-menu a'').on(''click'', function(){
$(''.dropdown-toggle'').html($(this).html() + ''<span class="caret"></span>'');
})
Si tiene multiple listas desplegables personalizadas como esta, puede usar este código de JavaScript:
$(''.dropdown-menu a'').on(''click'', function(){
$(this).parent().parent().prev().html($(this).html() + ''<span class="caret"></span>'');
})
También puede agregar una clase ''activa'' al elemento seleccionado.
$(''.dropdown'').on( ''click'', ''.dropdown-menu li a'', function() {
var target = $(this).html();
//Adds active class to selected item
$(this).parents(''.dropdown-menu'').find(''li'').removeClass(''active'');
$(this).parent(''li'').addClass(''active'');
//Displays selected text on dropdown-toggle button
$(this).parents(''.dropdown'').find(''.dropdown-toggle'').html(target + '' <span class="caret"></span>'');
});
Ver el ejemplo jsfiddle