How to open Bootstrap dropdown programmatically

Question

I\'m trying to open a Bootstrap dropdown when I click a item of another dropdown.

The idea is to select a city from the first drop down - then the script will auto o

Answer 1

This works for me.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

Markup:

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Answer 2

Try this:

$('#sidebar_filter_areas').click();

Answer 3

You can achieve the same thing using Native JavaScript like this:

 document.getElementById('XYZ').click('open');

It works on all browsers.

Answer 4

According to bootstrap docs you can simply use this :

$('.dropdown-toggle').dropdown();