Як відобразити вибраний елемент у спадному заголовку кнопки завантаження

Я використовую компонент випадаючого завантажувача у своєму додатку так:

<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)теж, оскільки вона завжди доступна.

Оновлено для завантаження 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

$(".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 маржу-право до класу "виділення".

Ця функція 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:

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

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

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

Здається, це довге питання. Все, що ми хочемо, це просто реалізувати тег вибору у групі введення. Але завантажувальна програма цього не зробить: https://github.com/twbs/bootstrap/isissue/10486

хитрість - просто додавання класу "btn-group" до батьківського діла

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

Після натискання елемента додайте такий атрибут даних, як, наприклад, data-selected-item = 'true' і отримайте його знову.

Спробуйте додати дані-selected-item = 'true' для елементу li, на який ви натиснули

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

Перш ніж додати цей атрибут, ви просто видаліть із списку наявний елемент, вибраний для даних. Сподіваюся, це допоможе вам

Для отримання інформації про використання атрибутів даних у 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) заборонити використовувати відключені елементи меню