CODEWITHSUNDEEP
javascriptjquerydrop-down-menutwitter-bootstrap
coderslay
coderslay

Reputation: 14370

How to change the main display of dropdown when an item is selected in bootstrap

This is the following http://jsfiddle.net/coderslay/enzDx/

I am trying to change the text Select as soon as an item is clicked

So if i select One from the list then One should be displayed.

How to do it?

Upvotes: 4

Views: 19719

Answers (3)

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

You can check the click event on the 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/ .

Upvotes: 3

mornaner
mornaner

Reputation: 2424

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

I have just added a span around the Select text in html to do the Javascript code simpler.

Upvotes: 0

Elliot B.
Elliot B.

Reputation: 17681

Working example: http://jsfiddle.net/enzDx/5/

The only change I made to your HTML was to wrap the text "Select" with span tags with the element ID dropdown_title so it was easier to update.

JavaScript:

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

Basically all I'm doing is whenever the user clicks on a list item, I update the drop-down title text with the text of the link contained in the last item.

Upvotes: 9

Related Questions