CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Ayush Goel
Ayush Goel

Reputation: 441

Trigger dropdown using javascript

I am using a bootstrap dropdown and I want to trigger it with some other button.

<li class="dropdown">
      <a href = "" class="dropdown-toggle" data-toggle="dropdown" role="button" id = "TAdropdown" aria-expanded="false">Insert TA<span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <form class="navbar-form navbar-left" >
          <div class="form-group" id = "TAform">
            <input type="text" class="form-control" placeholder = "Roll Number" required>
            <input type="text" class="form-control" placeholder = "M.A.C address" required>
          </div>
          <button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
          <button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
          <button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
        </form>

      </ul>
    </li>

I want this to be triggered (open) when I click on this other button:

  <button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>

ie what should be I put inside the deleteTA() function.

Upvotes: 1

Views: 3118

Answers (2)

dfsq
dfsq

Reputation: 193261

In your case you need to toggle dropdown this way:

function deleteTA(e) {
    $('.dropdown-toggle').dropdown().dropdown('toggle');
    e.stopPropagation();
}

Where you pass event object into function:

<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>

It's important here that you stop event propagation otherwise dropdown will immediately close.

Demo: http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview

Upvotes: 3

digvijay91
digvijay91

Reputation: 697

In the bootstrap documentation on dropdown (with interactive examples enabled) it is given in "Usage" section as:

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

Hope that helps.

Upvotes: 1

Related Questions