Vasilis Greece Vasilis Greece - 5 months ago 21
HTML Question

Jquery replace text without erasing the list

$("#firstshow .dropdown-menu li a").click(function(){
$('#firstshow button b').html(this);


<link href="" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src=""></script>
<div id="firstshow">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><b>36</b>
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">12</a>
<li><a href="#">24</a>
<li><a href="#">36</a>

<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The main idea is to make this code like the classic html select.

The reason I do this is because I didn't figure out how to change the blue hover in option menu.

Run code snippet and click the li content. As you see the next time the content is removing from my list and that is my problem. How can I keep the li data and not removing in my list?


Your inner-most statement should be:

$('#firstshow button b').text($(this).text());

The way you had it you used the a element object as the HTML code for the buttons text, but you don't want to assign the element, but its text. So:

  • Assign $(this).text()
  • Assign it with text() not with html() -- better practice.