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

Я использую раскрывающийся компонент bootstrap в своем приложении следующим образом:



<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").

910   13  

13 ответов:

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

133  
2014-03-03 08:23:13

обновлено для 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 Скрипка пример

126  
2015-08-07 23:02:10

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

24  
2013-12-11 19:39:47

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

    $(".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());
    });
6  
2015-03-19 11:11:49

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

enter image description here 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>
5  
2014-10-05 13:18:29

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

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

4  
2012-11-18 06:31:34

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

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});
4  
2014-04-07 19:35:52

эта единственная функция 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>');
        });
    });
});
4  
2016-01-24 22:24:02

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

$(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());
   });
});
3  
2015-11-07 22:58:22

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

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>');       
});
1  
2014-12-12 09:58:18

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

попробовать добавление data-selected-item= 'true' на li элемент что вы нажали, потом

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

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

сведения об использовании атрибутов данных в jQuery см. В разделе jQuery данные

0  
2012-11-18 06:31:22

например:

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 для изменения только текст кнопки.

вставить в $(документ).готов(функция () {} следующий текст

JavaScript:

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

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

0  
2016-03-17 13:55:58

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

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>
0  
2018-03-04 21:19:43

Comments

    Ничего не найдено.
Click here to cancel reply.