Как отобразить выбранный элемент в раскрывающемся списке кнопки Bootstrap

Я использую компонент Dropstrap 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. Другими словами, замените "Please Select From List" на выбранный элемент списка ( "Item I", "Item II", "Item III" ).

Ответ 1

Насколько я понял, ваша проблема в том, что вы хотите изменить текст кнопки с помощью щелчка связанного текста, если вы можете попробовать это: 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());

   });

});

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

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

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

 $(function(){

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

});

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

Ответ 2

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

Ответ 3

Я смог немного улучшить 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".

Ответ 4

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

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

Ответ 5

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

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>

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

Я скорректировал 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());
   });
});

Ответ 10

Кажется, это долгая проблема. Все, что мы хотим, это просто реализовать тег 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>');       
});

Ответ 11

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

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

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

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

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

Ответ 12

Например:

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

Ответ 13

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

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