twitter-bootstrap - opciones - plugin dropdown de javascript

¿Cómo puedo representar un cuadro de selección de lista(desplegable) con bootstrap?

Question

¿Hay algo fuera de la caja que Bootstrap admite para representar un cuadro de selección de lista desplegable de facto "regular"? ¿Es decir, donde el cuadro desplegable es una lista de valores y, si se selecciona, rellena el contenido del cuadro de lista?

¿Algo similar a esta funcionalidad?

http://bootstrapformhelpers.com/select/

Answer 1

Actualmente estoy luchando con menús desplegables y me gustaría compartir mis experiencias:

Hay situaciones específicas en las que <select> no se puede usar y se debe ''emular'' con el menú desplegable.

Por ejemplo, si desea crear grupos de entrada de arranque, como Botones con menús desplegables (consulte http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Desafortunadamente <select> no es compatible con los grupos de entrada, no se procesará correctamente.

¿O alguien ya resolvió esto? Estaría muy interesado en la solución.

Y para hacerlo aún más complicado, no puede usar tan simplemente $(this).text() para capturar lo que el usuario seleccionó en el menú desplegable si está usando gliconas o íconos de fuentes impresionantes como contenido para el menú desplegable. Por ejemplo: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Porque en este caso no hay texto y si agrega algo, entonces también se mostrará en el elemento desplegable y esto no es deseado.

Encontré dos posibles soluciones:

1) Use $(this).html() para obtener el contenido del elemento <li> seleccionado y luego examinarlo, pero obtendrá algo como <a href="#0"><i class="fa fa-minus"></i></a> por lo que necesitas jugar con esto para extraer lo que necesitas.

2) Use $(this).text() y oculte el texto en el elemento en el intervalo oculto: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li> . Para mí, esta es una solución simple y elegante, puede poner cualquier texto que necesite, el texto se ocultará y no tendrá que hacer ninguna transformación de $(this).html() como en la opción 1) para obtener lo que necesitas.

Espero que esté claro y pueda ayudar a alguien :-)

Answer 2

Bootstrap 3 usa la clase .form-control para .form-control componentes de formulario.

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

getbootstrap.com/css/#forms-controls

Answer 3

El .form-control Bootstrap3 es genial, pero para aquellos que aman o necesitan el menú desplegable con el botón y la opción ul, aquí está el código actualizado. He editado el código de Steve para corregir el salto al enlace hash y el cierre del menú desplegable después de la selección.

Gracias a Steve, Ben y Skelly!

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest(''div'').find(''button[data-toggle="dropdown"]'').html(selText + '' <span class="caret"></span>'');
    $(this).closest(''.dropdown'').removeClass("open");
    return false;
});

Answer 4

El código de Ben requiere que el div padre tenga la clase de grupo de formularios (estaba usando btn-group), esta es una versión ligeramente diferente que solo busca el div más cercano e incluso puede ser un poco más rápido.

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest(''div'').find(''button[data-toggle="dropdown"]'').html(selText + '' <span class="caret"></span>'');
});

Answer 5

La respuesta fácil y agradable de Skelly ahora está desactualizada con los cambios a la sintaxis desplegable en Bootstap. En su lugar usa esto:

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents(''.form-group'').find(''button[data-toggle="dropdown"]'').html(selText+'' <span class="caret"></span>'');
});

Answer 6

Otra forma sin usar el .form-control es esta:

  $(".dropdown-menu li a").click(function(){
        $(this).parents(".btn-group").find(''.btn'').html($(this).text() + '' <span class="caret"></span>'');
        $(this).parents(".btn-group").find(''.btn'').val($(this).data(''value''));
      });

$(".dropdown-menu li a").click(function(){
  $(this).parents(".btn-group").find(''.btn'').html($(this).text() + '' <span class="caret"></span>'');
  $(this).parents(".btn-group").find(''.btn'').val($(this).data(''value''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href=''#''>test 1</a></li>
    <li><a href=''#''>test 2</a></li>
    <li><a href=''#''>test 3</a></li>
  </ul>
</div>

Answer 7

Otra opción es hacer que el menú desplegable Bootstrap se comporte como una selección usando jQuery ...

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents(''.btn-group'').find(''.dropdown-toggle'').html(selText+'' <span class="caret"></span>'');
});

http://www.bootply.com/b4NKREUPkN

Answer 8

Otra opción podría ser usar bootstrap select . En sus propias palabras:

Una selección personalizada / selección múltiple para Bootstrap usando el menú desplegable, diseñado para comportarse como las selecciones normales de Bootstrap.

Answer 9

Prueba: http://jsfiddle.net/brynner/hkwhaqsj/6/

HTML

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery

$(''body'').on(''click'',''.option li'',function(){
    var i = $(this).parents(''.select'').attr(''id'');
    var v = $(this).children().text();
    var o = $(this).attr(''id'');
    $(''#''+i+'' .selected'').attr(''id'',o);
    $(''#''+i+'' .selected'').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}