Handle Bootstrap dropdown event in jQuery

Question

I have markup for twitter bootstrap dropdown like below

<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
   <a class="dropdown-item" href="#">CLE</a>
   <a class="dropdown-item" href="#">SQL</a>
   <a class="dropdown-item" href="#">FFILE</a>
   <a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>

Now, added click event in dropdown using jquery as below

 $('.dropdown-menu a').click(function () {           
    alert("Hi")
  });

My click event is working but, I am not able to update the selected value in dropdown. How to do it?

do you want to set the selected text as button text?

Kiranramchandran
– Kiranramchandran

2018-11-23 08:38:44 +00:00
Commented Nov 23, 2018 at 8:38 — Kiranramchandran
– Kiranramchandran, Commented Nov 23, 2018 at 8:38
@Kiranramchandran yes

RAM
– RAM

2018-11-23 08:40:24 +00:00
Commented Nov 23, 2018 at 8:40 — RAM
– RAM, Commented Nov 23, 2018 at 8:40
check the answer

Kiranramchandran
– Kiranramchandran

2018-11-23 08:49:25 +00:00
Commented Nov 23, 2018 at 8:49 — Kiranramchandran
– Kiranramchandran, Commented Nov 23, 2018 at 8:49

Sumesh TG · Accepted Answer · 2018-11-23 09:23:55Z

$('.dropdown-menu a').click(function () {           
    $('button').text($(this).text());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
   <a class="dropdown-item" href="#">CLE</a>
   <a class="dropdown-item" href="#">SQL</a>
   <a class="dropdown-item" href="#">FFILE</a>
   <a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>

use $('button').text($(this).text()); to set value to button.

Kiranramchandran · Accepted Answer · 2018-11-23 08:47:18Z

1

try this

$('.dropdown-menu a').click(function () {           
    $('button[data-toggle="dropdown"]').text($(this).text());
});

DEMO HERE

answered Nov 23, 2018 at 8:47

Kiranramchandran

2,09416 silver badges30 bronze badges

Collectives™ on Stack Overflow

Handle Bootstrap dropdown event in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related