how can i change a html button tag's text using jquery

Question

i have a html code that i want to change the text value using jQuery ...

 <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown"><span>1395</span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">1395</a></li> <li><a class="dropdown-item" href="#">1396</a></li> <li><a class="dropdown-item" href="#">1397</a></li> <li><a class="dropdown-item" href="#">1398</a></li> <li><a class="dropdown-item" href="#">1399</a></li> </ul> </div> 

dont mind this classes ( btn btn-secondary dropdown-toggle ) its for bootstrap ...

Answer 1

Try the following way:

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

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown"><span>1395</span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">1395</a></li> <li><a class="dropdown-item" href="#">1396</a></li> <li><a class="dropdown-item" href="#">1397</a></li> <li><a class="dropdown-item" href="#">1398</a></li> <li><a class="dropdown-item" href="#">1399</a></li> </ul> </div> 

Answer 2

I put a class on the span for easy targeting. Then I just put a click binding on the dropdown which processes the click for any of the items. When any of the items are clicked, it finds the closest parent dropdown, and then finds the related nested selection element in it and changes it's text.

 $('.dropdown').on('click', '.dropdown-item', function(e){ $(e.target).closest('.dropdown').find('.selection').text(e.target.innerText); }); 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown"><span class="selection">1395</span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">1395</a></li> <li><a class="dropdown-item" href="#">1396</a></li> <li><a class="dropdown-item" href="#">1397</a></li> <li><a class="dropdown-item" href="#">1398</a></li> <li><a class="dropdown-item" href="#">1399</a></li> </ul> </div>