От новичка до гуру: Курсы программирования на 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
    • Новые материалы
    Если вы используете CodeMirror, вам обязательно нужно это проверить
    Представляем радужные скобки🌈 CodeMirror — невероятно мощный редактор кода в браузере. Хотя его API сложен, он дает разработчикам массу возможностей для создания IDE в браузере на любом..
    Пришло время попрощаться с этими устаревшими библиотеками Python
    Поскольку Python продолжает развиваться, некоторые библиотеки, которые когда-то широко использовались, устаревают. Эти устаревшие библиотеки могут вызывать проблемы совместимости, уязвимости в..
    Привет, Зак Аргайл, сначала позвольте мне поблагодарить за эту статью, но я не думаю, что все ваши примеры…
    Привет, Зак Аргайл, сначала позвольте мне поблагодарить за эту статью, но я не думаю, что все ваши примеры компаний, которые придерживаются устаревших кодовых баз, написанных в таких фреймворках,..
    Быстрый хак: реализация семантики вызова метода в C
    C — процедурный язык, минималистичный и лишенный объектной семантики. Вместо этого у вас есть структуры, функции (процедуры) и указатели. Вы можете использовать их для реализации чего-то похожего..
    Разоблачение роли «старшего инженера» [Часть 1]
    Я только начал работать в Andela в новой должности старшего инженера-программиста, и должен признать, что до сих пор это была одна из моих лучших поездок. В Andela наша миссия состоит в том,..
    Как настроить автоматические перенаправления в вашем приложении React
    В сегодняшней статье я покажу вам, как настроить автоматическое перенаправление на защищенную/ограниченную страницу в вашем приложении реагирования после аутентификации пользователя. ВВЕДЕНИЕ..
    Освойте обещания JavaScript — Полная серия
    Полную серию видео смотрите по ссылке: https://youtube.com/playlist?list=PLbXAYqhxhzxxenzSiFcTMpeJ_VqX5D7KH Не забудьте подписаться, чтобы получать отличный контент и в будущем. Мы находимся в..