Question

这是以下http://jsfiddle.net/coderslay/enzDx/

我想在点击某个项目后立即更改文字选择

因此，如果我从列表中选择One，则应显示One。

怎么做？

Answer 1

我对您的HTML所做的唯一更改是使用span标记将文本“选择”包装为元素ID dropdown_title，以便更新。

JavaScript的：

$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
    $('#dropdown_title').html($(this).find('a').html());
});

基本上我所做的只是当用户点击列表项时，我用下一项中包含的链接文本更新下拉标题文本。

Answer 2

您可以查看click上的dropdown-menu事件：

$('.dropdown-menu > li').click(function() {
    var $toggle = $(this).parent().siblings('.dropdown-toggle');
    $toggle.html("<i class=\"icon icon-envelope icon-white\"></i> " + $(this).text() + "<span class=\"caret\"></span>")
});

jsFiddle：http://jsfiddle.net/enzDx/6/。

Answer 3

HTML：

<ul class="nav nav-pills left">
    <li class="dropdown active span8">
        <a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown">
            <i class="icon icon-envelope icon-white"></i>
            <span id="text">Select</span><span class="caret"></span>
        </a>
        <ul ID="divNewNotifications" class="dropdown-menu">
            <li><a>One</a></li>
            <li><a>Two</a></li>
            <li><a>Three</a></li>
        </ul>
    </li>
</ul>

JavaScript的：

$('.dropdown-toggle').dropdown();
$('#divNewNotifications li > a').click(function(){
    $('#text').text($(this).html());
});

DEMO

我刚刚在html的Select文本周围添加了一个范围，以简化Javascript代码。

如何在引导程序中选择项目时更改下拉列表的主显示

3 个答案: