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?

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?

• javascript
• jquery
• twitter-bootstrap
• drop-down-menu

• do you want to set the selected text as button text? – Kiranramchandran Commented Nov 23, 2018 at 8:38
• @Kiranramchandran yes – RAM Commented Nov 23, 2018 at 8:40
• check the answer – Kiranramchandran Commented Nov 23, 2018 at 8:49

2 Answers 2

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

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


<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn./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.

try this

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

DEMO HERE