Как отобразить выбранный элемент в кнопке начальной загрузки

Обновлен для Bootstrap 3.3.4:

Это позволит вам иметь различный текстовый текст и данные для каждого элемента. Он также сохранит каретку при выборе.

JS:

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

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

Пример скрипта JS

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

Код для кнопки

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

JQuery Snippet

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

Я также добавил 5px margin-right в класс "selection".

Этот файл работает с несколькими выпадающими списками на одной странице. Кроме того, я добавил каретки на выбранный элемент:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

Вот моя версия, которая, надеюсь, может сэкономить ваше время:)

jQuery ЧАСТЬ:

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

HTML ЧАСТЬ:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Эта единственная функция jQuery сделает все, что вам нужно.

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

Далее модифицировано на основе ответа от @Kyle as $.text() возвращает точную строку, поэтому тег каретки печатается буквально, а не как разметка, на всякий случай, если кто-то захочет оставить курсор неизменным в выпадающем списке.

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

вам нужно использовать класс add open в <div class="btn-group open">

и в li добавить class="active"

Я скорректировал script для нескольких выпадающих списков на странице

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Кажется, это долгая проблема. Все, что мы хотим, это просто реализовать тег select во входной группе. Но bootstrap не сделал бы этого: https://github.com/twbs/bootstrap/issues/10486

трюк просто добавляет класс "btn-group" к родительскому div

HTML:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

JS:

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

Мне пришлось поместить некоторые отображаемые javascripts выше внутри кода "document.ready". Иначе они не сработали. Наверное, очевидно для многих, но не для меня. Так что, если вы тестируете, посмотрите на этот вариант.

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Например:

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

Я использую новый элемент BtnCaption для изменения только текста кнопки.

Вставьте в $(document).ready(function() {} следующий текст

JavaScript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled) не разрешать использование отключенных пунктов меню

Как только вы нажмете элемент, добавьте некоторый атрибут данных, например data-selected-item = 'true', и получите его снова.

Попробуйте добавить данные-selected-item = 'true' для элемента li, который вы нажали, а затем

   $('ul.dropdown-menu li[data-selected-item] a').text();

Перед добавлением этого атрибута вы просто удаляете существующий выбранный элемент данных в списке. Надеюсь, это поможет вам.

Информацию об использовании атрибутов данных в jQuery см. данные jQuery