Выпадающий список Bootstrap 3

Мы пытаемся повторно внедрить нашу регистрационную форму с помощью бутстрапа. Наша форма регистрации содержит раскрывающийся список, который представляет тип компании. Я много раз проводил поиск в Интернете, но я не вижу никакого примера, когда ввод формы был бы выпадающим.

Bootstrap дает массу примеров раскрывающихся списков, связанных с различными действиями, но мне нужно выпадающий вход. Я придумал два решения:

Во-первых:

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select>

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

Вторая версия:

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

Этот выглядит хорошо:

но это кнопка. Когда выбрана опция, я не хочу выполнять какие-либо действия, все, что я хочу, - это изменить текст и привязать выделение с соответствующим полем ввода.

Оба этих подхода швы, чтобы быть неправильным выбором для моего действия. Я отказываюсь верить, что Bootstrap не содержит простого выпадающего единственного компонента выбора, связанного с полем ввода.

Что мне не хватает? Пожалуйста, помогите.

Ответ 1

Если вы хотите достичь этого, просто держите кнопку раскрывающегося списка и создавайте его как поле выбора. Код здесь и ниже.

.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%;}

Чтобы кнопка работала как поле выбора, все, что вам нужно добавить, это крошечный код javascript:

$('.dropdown-menu a').on('click', function(){    
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');    
})

Если у вас несколько настраиваемых выпадающих списков, как это, вы можете использовать этот код javascript:

$('.dropdown-menu a').on('click', function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
})

Ответ 2

Мы просто переключили наш сайт на bootstrap 3, и у нас есть куча форм... было не весело, но как только вы повесили его не так уж плохо.

Это то, что вы ищете? Демо здесь

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

Ответ 3

Вы также можете добавить класс 'active' к выбранному элементу.

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

См. пример jsfiddle

Ответ 4

В течение некоторого времени я искал хороший выпадающий список, и я нашел хороший. Так что я просто оставлю это здесь. Его называют bootsrap-select

здесь ссылка. проверьте это. он имеет редактируемые выпадающие списки, выпадающие списки комбо и многое другое. И его бриз добавить к вашему проекту.

Если ссылка умирает, просто выполните поиск bootstrap-select по silviomoreto.github.io. Это лучше, потому что его обычный тег select

Ответ 5

Я хотел бы продлить ответ paulalexandru и поставить здесь полное решение, которое обычно работает с выпадающими списками бутстрапов и обновлением содержимого главной кнопки, а также значением из выбранной опции.

Выпадающее окно начальной загрузки определяется следующим образом:

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

В дополнение к стандартным выпадающим кодом начальной загрузки существует атрибут data-value для хранения значений в каждом раскрывающемся списке (в элементе <a>).

Теперь код JS. Я создал функцию, которая обрабатывает выпадающие меню:

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() + '&nbsp;</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'));
}

И, конечно же, нам нужно добавить прослушиватель событий:

$(document).ready(function(){
    $('.dropdown-menu a').on('click', dropdownToggle);
}

Ответ 6

Выпадающий список, который выглядит так, зависит от вашего браузера, так как для некоторых это невозможно. Похоже, что у вас IE9, но в Chrome будет выглядеть совсем по-другому.

Вы можете использовать следующее:

http://silviomoreto.github.io/bootstrap-select/

Что сделает ваш selectboxes более согласованным кросс-браузер.

Ответ 7

Попробуйте следующее:

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