Как я могу отобразить окно выбора списка (раскрывающийся список) с помощью bootstrap?

есть ли что-нибудь из коробки, которую поддерживает bootstrap для отображения" обычного " выпадающего списка defacto? То есть, где раскрывающийся список представляет собой список значений и если выбрано заполнить содержимое списка?

что-то похожее на эту функцию?

http://bootstrapformhelpers.com/select/

enter image description here

9 ответов


Bootstrap 3 использует .form-control класс для стиля компонентов формы.

<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


другой вариант - сделать раскрывающийся список Bootstrap похожим на select с помощью 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


хороший и простой ответ Скелли теперь устарел с изменениями в синтаксисе раскрывающегося списка в Bootstap. Используйте этот код:

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

тест: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%;}

другой вариант может использовать bootstrap select. По их собственным словам:

пользовательский select / multiselect для Bootstrap с помощью раскрывающегося списка кнопок, предназначенный для поведения, как обычный Bootstrap выбирает.


другой способ без использования .управление формой таково:

  $(".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>

код Бена требует, чтобы родительский div имел класс form-group (я использовал btn-group), это немного другая версия, которая просто ищет ближайший div и может быть даже немного быстрее.

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

В Bootstrap3 .form-control круто, но для тех, кто любит или нуждается в раскрывающемся списке с кнопкой и опцией ul, вот обновленный код. Я отредактировал код Стива, чтобы исправить переход к хэш-ссылке и закрытие раскрывающегося списка после выбора.

спасибо Стиву, Бену и Скелли!

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

в настоящее время я борюсь с выпадающими списками, и я хотел бы поделиться своим опытом:

существуют конкретные ситуации, когда <select> не может использоваться и должен быть "эмулирован" с выпадающим списком.

например, если вы хотите создать группы ввода начальной загрузки, например кнопки с выпадающими списками (см. http://getbootstrap.com/components/#input-groups-buttons-dropdowns). К сожалению <select> не поддерживается в группах ввода, он не будет отображаться должным образом.

или кто-нибудь уже решил эту? Я был бы очень заинтересован в решении.

и чтобы сделать его еще более сложным, вы не можете использовать так просто $(this).text() чтобы поймать то, что пользователь выбрал в раскрывающемся списке, если вы используете glypicons или font awesome icons в качестве содержимого для раскрывающегося списка. Например: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Потому что в этом случае нет текста, и если вы добавите его, он также будет отображаться в раскрывающемся элементе, и это нежелательно.

я нашел два возможные решения:

1) Использовать $(this).html() чтобы получить содержимое выбранного <li> элемент, а затем изучить его, но вы получите что-то вроде <a href="#0"><i class="fa fa-minus"></i></a> так что вам нужно играть с этим, чтобы извлечь то, что вам нужно.

2) Использовать $(this).text() и Скрыть текст в элементе в скрытом диапазоне: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Для меня это простое и элегантное решение, вы можете поместить любой текст, который вам нужен, текст будет скрыт, и вам не нужно делать никаких преобразований $(this).html() результат как в варианте 1) чтобы получить то, что тебе нужно.

Я надеюсь, что это ясно и может помочь кому-то: -)