От новичка до гуру: Курсы программирования на CyberDuff

Выбранный элемент раскрывающегося меню Bootstrap не загружается

связанные bootstrap.min.css, bootstrap-theme.min.css, jquery.min.js", bootstrap.js, dropdown.js

http://jsfiddle.net/id10922606/54edxsmv/1/

<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-   toggle="dropdown"  aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>

Why selected item not loading instead of 'Action' list value. only working dropdown menu ? please help

twitter-bootstrap
12.05.2015

  • Не могли бы вы обновить свой код в fiddle. 12.05.2015

Ответы:


1

Вы должны убедиться, что ваша скрипка включает ссылки/ссылки на внешние ресурсы.

Когда вы говорите «Почему выбранный элемент не загружается вместо значения списка« Действие »», вы имеете в виду, что он не обновляет раскрывающийся список с элементом, на который вы нажимаете? Если это так, вы хотите добавить следующее:

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();

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

http://jsfiddle.net/54edxsmv/4/

Что это делает, так это то, что когда вы нажимаете на тег li a в списке .dropdown-menu, он обновляет текст и значение первой кнопки .btn:first-child с текстом нажатых элементов.

Существует множество способов обработки нескольких раскрывающихся списков, например:

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();

    $.each($('.btn-group'), function() {

        var $dropdown = $(this);

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

});

http://jsfiddle.net/54edxsmv/5/

12.05.2015
  • Это работает нормально. но это для одного раскрывающегося списка. когда я использую несколько раскрывающихся списков, этот код работает для всех раскрывающихся списков вместе. какой код для отдельных выпадающих меню? 12.05.2015
  • Я обновил ответ, чтобы включить код для нескольких раскрывающихся списков. 12.05.2015
    • Новые материалы
    Основы Spring: Bean-компоненты, контейнер и внедрение зависимостей
    Как лего может помочь нашему пониманию Когда мы начинаем использовать Spring, нам бросают много терминов, и может быть трудно понять, что они все означают. Итак, мы разберем основы и будем..
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..
    Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
    Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..
    Все о кейсах: Camel, Snake, Kebab & Pascal
    В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..