Як я можу візуалізувати поле вибору списку (спадне меню) за допомогою завантажувальної програми?

Чи є щось із вікна, що підтримує завантажувальний сервіс, щоб надати "звичайний" параметр вибору списку дефакто? Тобто, де випадаючий рядок - це список значень, а якщо вибрано, заповнювати вміст поля списку?

Щось подібне до цієї функціональності?

http://bootstrapformhelpers.com/select/

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 вести себе як обране за допомогою 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

Приємна і проста відповідь Skelly тепер застаріла зі змінами синтаксису, що випадає у 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 . На власні слова:

Спеціальний вибір / мультиселекція для завантажувального пристрою за допомогою випадаючого кнопки, розроблений таким чином, що він обирається як звичайний вибір програми Bootstrap.

Ще один спосіб без використання .form-control:

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

Код Бена вимагає, щоб батьківський дів мав клас форм-групи (я використовував 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()щоб зрозуміти, що обраний користувачем у спадному меню, якщо ви використовуєте гліпікони чи чудові шрифтові значки як вміст для випадаючого. Наприклад: <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), щоб отримати те, що вам потрібно.

Я сподіваюся, що це зрозуміло і може комусь допомогти :-)