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

Я использую компонент Dropstrap Dropdown в своем приложении следующим образом:

Я хотел бы отобразить выбранный элемент в качестве метки 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()); }); }); 

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

это не работает для меня, когда у меня есть список элементов

  • заполненных через вызов ajax.

    поэтому вам нужно делегировать событие ближайшему статическому родителю с .on() метода .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() + ' '); $(this).parents(".dropdown").find('.btn').val($(this).data('value')); }); 

    HTML:

      

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

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

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

     

    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 в class «selection».

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

      $(".dropdown-menu").on('click', 'li a', function(){ $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' '); $(this).parent().parent().siblings(".btn:first-child").val($(this).text()); }); и  $(".dropdown-menu").on('click', 'li a', function(){ $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' '); $(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"); }); и $(".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 ЧАСТЬ:

      

    вам нужно использовать class add open в

    и в li add class="active"

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

     $(".dropdown-menu li").click(function(){ $(this).parents(".btn-group").find('.btn').html( $(this).text()+" " ); }); 

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

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

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

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

    HTML:

     

    ЯШ:

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

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

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

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

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

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

    Например:

    HTML:

      

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

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

    JavaScript:

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

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

    Мне пришлось поместить некоторые отображаемые javascripts выше в код «document.ready». В противном случае они не сработали. Вероятно, очевидно для многих, но не для меня. Поэтому, если вы тестируете этот вариант.

      
  • Шрифт Awesome не работает, иконки отображаются как квадраты
  • Измените порядок col - * - 12 столбцов в Bootstrap, используя push / pull
  • Как выровнять мертвую точку изображения с помощью бутстрапа
  • Bootstrap - как настроить фиксированную ширину для ?
  • Центрировать колонку с помощью Twitter Bootstrap
  • Как стиль иконок, размер и тень шрифта Awesome Icons
  • Twitter Bootstrap Используйте collapse.js на ячейках таблицы
  • Использование twitter bootstrap 2.0 - Как сделать равные высоты столбцов?
  • как полностью уничтожить загрузочное модальное окно?
  • twitter bootstrap navbar фиксированный верхний перекрывающий сайт
  • Как сделать столбцы колонок упорядоченными по горизонтали?
  • Давайте будем гением компьютера.