Hay nada fuera de la caja que bootstrap apoya a representar un «regular» de facto lista desplegable, seleccione el cuadro? Es decir, donde el cuadro de lista desplegable se muestra una lista de los valores y si se ha seleccionado rellenar el contenido del cuadro de lista?

Algo similar a esta funcionalidad?

http://bootstrapformhelpers.com/select/

¿Cómo puedo procesar una lista, seleccione la casilla de (desplegable) con bootstrap?

  • A qué te refieres – getbootstrap.com/css/#forms-controls (en Selecciona) ?
  • Esta es la forma normal selecciona de trabajo. Su una lista de opciones, selecciona uno, y que se convierten en el valor. Cómo es lo que están pidiendo diferente?
  • Ahora me pregunto ¿cómo se puede reemplazar el que se las ingenió mirando icono de lista desplegable con un bonito símbolo de intercalación. 🙂
  • -prefix-appearance: none , a continuación, utilizar la imagen de fondo ?
  • De getbootstrap.com: Evitar el uso de <seleccione> elementos que no pueden ser totalmente de estilo en los navegadores WebKit.
  • Me siento incómodo con la idea de hacer caso omiso de un nativo de control por el bien de un marco visual. Estoy realmente sorprendido de que bootstrap no tiene una solución mejor uso de <select>. mientras bootstrap utiliza <ul> para los menus desplegables, que es en última instancia un uso engañoso de dicha etiqueta. dado todo el JQuery pompa en bootstrap, me pregunto por qué no alterar el cursor para seleccionar sí. Que sería mucho más elegante solución de malversación de ul.

InformationsquelleAutor genxgeek | 2013-08-09

9 Comentarios

  1. 423

    Bootstrap 3 utiliza el .form-control clase de estilo 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>

    http://getbootstrap.com/css/#forms-controls

    • Encontré aquí porque necesitaba un Bootstrap buscar Elm sin usar bootstrap.js. La clave de la diferencia visual entre este y el ‘completo’ bootstrap solución (mencionado por @JonathanEdwards) es que el menú que aparece es cuadrado, menos bonita, como la alert cuadro proporciona tu navegador. Pequeño problema, en realidad. La onu-al hacer clic en el selector se ve exactamente como un Bootstrap, sin embargo.
  2. 38

    Otra opción es hacer el Bootstrap desplegable se comportan como un select con 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

    • Útil cuando no se desea un formulario. Gracias.
  3. 11

    Skelly agradable y de fácil respuesta está desactualizado con los cambios en el desplegable de la sintaxis en Bootstap. En lugar de utilizar este:

    $(".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>');
    });
  4. 11

    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%;}
    • El uso de ‘min-width’ en ‘.seleccione el botón de’ la clase de acuerdo a lo que usted necesita.
  5. 9

    Otra opción podría ser el uso de bootstrap seleccione. En sus propias palabras:

    Una costumbre select /selección múltiple para el Bootstrap usando el botón de lista desplegable, diseñados para comportarse como regular Bootstrap selecciona.

    • Hace exactamente lo que dice, y está disponible a través de cdn.
  6. 5

    Otra manera sin el uso de la .formulario de control es este:

      $(".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'));
          });

    JS:

    $(".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'));
    });

    HTML:

    <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>

  7. 3

    De Ben código requiere que el div padre tiene la forma de grupo de clase (yo estaba usando btn-group), esta es una versión ligeramente diferente que sólo busca el más cercano div y puede incluso 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>');
    });
  8. 1

    La Bootstrap3 .form-control es cool, pero para aquellos que aman o necesita el desplegable con botón y ul opción, aquí está el código actualizado. He editado el código de Steve para solucionar saltar a la hash de enlace y el cierre de la lista 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;
    });
  9. 1

    Actualmente estoy luchando con listas desplegables y me gustaría compartir mis experiencias:

    Hay situaciones específicas en las que <select> no puede ser utilizado y debe ser «emulado» con desplegable.

    Por ejemplo, si desea crear bootstrap grupos de entrada, como Botones, listas desplegables (ver http://getbootstrap.com/components/#input-groups-buttons-dropdowns). Por desgracia <select> no es compatible en grupos de entrada, no se procesan correctamente.

    O ¿alguien ha solucionado esto ya?
    Yo estaría muy interesado en la solución.

    Y para hacerlo aún más complicado, no se puede usar así que simplemente $(this).text() para capturar lo que el usuario selecciona en el desplegable si usted está usando glypicons o fuente impresionante iconos como de contenido de lista desplegable. Por ejemplo:
    <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>
    Porque en este caso no hay ningún texto y si se añade algo, entonces será también aparece en el desplegable elemento y esto es no deseados.

    He encontrado dos posibles soluciones:

    1)
    Uso $(this).html() para obtener el contenido de los seleccionados <li> elemento y, a continuación, examinar, pero vas a conseguir algo como <a href="#0"><i class="fa fa-minus"></i></a> lo que necesitas para jugar con este extracto de lo que usted necesita.

    2)
    Uso $(this).text() y ocultar el texto en el elemento oculto útil:
    <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>.
    Para mí, esta es la solución sencilla y elegante, usted puede poner cualquier texto, el texto se oculta, y usted no necesita hacer cualquier transformaciones de $(this).html() resultado como en la opción 1) para obtener lo que necesita.

    Espero que sea claro, y puede ayudar a alguien 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here