handling dropdown item selected event using Bootstrap

Question

Hi I have just started using twitter bootstrap and trying my hand on handling dropdown events.

I want to handle the dropdown item selected event, that is, when the user clicks on a particular item, a table should be displayed just below the dropdown. Can anyone please help me out in achieving this? Thank you.

<ul class="dropdown-menu">
    <!-- dropdown menu links -->
    <li><a href="#" id="action-1">How are you?</a></li>
    <li><a href="#2">What is your name</a></li>
    <li><a href="#section-2">Section 2</a></li>
</ul>

I am sorry,actually I intend to type the html code for dropdown,but its not getting displayed. I am sorry again,I am new to this forum,but please help me out. — user2782692
– user2782692, Commented Sep 16, 2013 at 6:06
I have formatted the code, but just so you know for that you just select the code and press the {} button in the formatting area — omma2289
– omma2289, Commented Sep 16, 2013 at 6:07

omma2289 · Accepted Answer · 2013-09-16 06:10:14Z

18

There's no such event in Bootstrap, the only events you can handle for dropdowns are show, shown, hide, hidden, you can use simple jQuery for this though:

$('.dropdown-menu a').click(function(){
    //Show table
});

answered Sep 16, 2013 at 6:10

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2782692 Over a year ago

thanks for the edit and the response,in the jQuery,should I write the entire code for table? I typed the code but it gives me errors,what should I do?

omma2289 Over a year ago

@user2782692 I'm not sure what you're trying to do but you should learn the basics of DOM manipulation with jQuery, I suggest you read this, there's a section on creating new DOM elements

user2782692 Over a year ago

thanks,I am trying to create a html table in jQuery so that when the user clicks on the particular item on the dropdown list,the table will be displayed,can you please give me an idea of how this can be done?

omma2289 Over a year ago

@user2782692 the approach will depend on your needs, do you really need to build the table on each click? can't you build the table on page load and just hide/show it when a link is clicked? but before anything you should really get a grasp on jquery, that's why I suggest you read the link I gave you

guymac · Accepted Answer · 2014-03-20 21:27:08Z

0

You can handle the function in the menu itself, e.g.

<li><a href="javascript:itemSelected('A')">A. Hello World!</a></li>

answered Mar 20, 2014 at 21:27

guymac

4224 silver badges8 bronze badges

3 Comments

Randy L Over a year ago

inline JS is slightly evil

andyengle Over a year ago

Yeah... don't do that. This is difficult to maintain, nor is it elegant. There are much better ways.

Roy Falk Over a year ago

This is neither inelegant, nor difficult to maintain when the page is generated by Flask/Jinga.

Collectives™ on Stack Overflow

handling dropdown item selected event using Bootstrap

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related