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

Я использую в своем приложении загрузочный компонент Dropdown:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

Я хотел бы отобразить выбранный элемент в качестве метки btn. Другими словами, замените «Пожалуйста, выберите из списка» на выбранный элемент списка («Элемент I», «Элемент II», «Элемент III»).

Насколько я понял, ваша проблема в том, что вы хотите изменить текст кнопки с помощью кликающего связанного текста, если вы можете попробовать это: http://jsbin.com/owuyix/4/edit

 $(function(){

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

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

Согласно вашему комментарию:

это не работает для меня, когда у меня есть списки, <li>заполненные через вызов ajax.

поэтому вы должны делегировать событие ближайшему статическому родителю с помощью .on()метода jQuery:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Здесь событие делегировано статическому родителю $(".dropdown-menu"), хотя вы также можете делегировать событие, $(document)потому что оно всегда доступно.

Обновлено для 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 Fiddle

Я смог немного улучшить ответ Джая на работу в случае, если у вас есть несколько раскрывающихся списков кнопок с довольно хорошей презентацией, которая работает с начальной загрузкой 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".

Эта единственная функция 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>');
        });
    });
});

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

JQuery PART:

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

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

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

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

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

и в liдобавленииclass="active"

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

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

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

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

Еще один простой способ (Bootstrap 4) для работы с несколькими выпадающими

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

Это кажется долгой проблемой. Все, что мы хотим, это просто реализовать тег select в группе ввода. Но загрузчик не будет этого делать: 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>

ЯШ:

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

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

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

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

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

Для получения информации об использовании атрибутов данных в jQuery, обратитесь к данным jQuery.

Мне пришлось поместить некоторые отображаемые 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) не разрешать использовать отключенные пункты меню