Geek Answers Handbook

(Bootstrap) - Changing the button’s popup text to reflect the pressed item removes the caret

I use the drop-down list from the bootstrap, and I would like the button to change its text, depending on which of the two elements of the drop-down I click. The text changes according to the pressed element, but the carriage disappears after the first change, etc. I want to save the carriage in the button!

<head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast <span class="caret"></span></button> <ul class="dropdown-menu" value="Fast"> <li onclick="dropdown(this.innerHTML);">Fast</li> <li onclick="dropdown(this.innerHTML);">Accurate</li> </ul> </div> <script> function dropdown(val){ var y = document.getElementsByClassName('btn btn-default dropdown-toggle'); var aNode = y[0].innerHTML=val; } </script>
+5
source share
6 answers

Using your current code, adding a carriage icon code will help you save it after changing the value of the drop-down list.

 function dropdown(val) { var y = document.getElementsByClassName('btn btn-default dropdown-toggle'); var aNode = y[0].innerHTML = val + ' <span class="caret"></span>'; // Append } 
 <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast <span class="caret"></span> </button> <ul class="dropdown-menu" value="Fast"> <li onclick="dropdown(this.innerHTML);">Fast</li> <li onclick="dropdown(this.innerHTML);">Accurate</li> </ul>
+5
source

.innerHTML will provide you with all the content, including the internal span that you use for the caret.

What you need is the textContent firstchild your dropdown, which is actually textual.

Fragment example :

 var dropdown = document.getElementsByClassName('dropdown-toggle')[0], options = document.getElementsByClassName('dropdown-menu')[0] ; options.addEventListener("click", function(e) { if (e.target.tagName === 'A') { dropdown.firstChild.textContent = e.target.textContent + ' '; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="dropdown"> <button id="dropdownBtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Fast <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Fast</a></li> <li><a href="#">Accurate</a></li> </ul> </div>
+2
source

Use innerText in the drop-down menu instead of innerHTML

 <li onclick="dropdown(this.innerText);">Fast</li>

Modify the function contents to replace the textContent of FirstChild that contains the button value.

 var aNode = y[0].firstChild.textContent = val; 

 function dropdown(val) { var y = document.getElementsByClassName('btn btn-default dropdown-toggle'); var aNode = y[0].firstChild.textContent = val; } 
 <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast <span class="caret"></span> </button> <ul class="dropdown-menu" value="Fast"> <li onclick="dropdown(this.innerText);">Fast</li> <li onclick="dropdown(this.innerText);">Accurate</li> </ul>
+1
source

This is because you replace the html with a value - the carriage spacing is inside the button (so that part of the html of the button), therefore it is also replaced.

As you are using bootstrap, which uses jquery, use jquery to make this easy:

 function dropdown(val) { $(".btn.dropdown-toggle").text(val) }
+1
source

You can save the caret inside the variable and add it back when the value changes. Since you are using bootstrap, you already have jQuery loaded on the page, so let's do it like this:

Fiddle

 $myDropdown = $('#MyDropdown'); $myDropdown.find("li").click(function(){ $caret = ' <span class="caret"></span>'; $val = $(this).html(); $(".btn.dropdown-toggle").html($val+$caret) }); 
 <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast <span class="caret"></span></button> <ul id="MyDropdown" class="dropdown-menu" value="Fast"> <li>Fast</li> <li>Accurate</li> </ul> </div>
+1
source

You can try:

 $(".dropdown-menu li a").click(function(){ $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); $(this).parents(".dropdown").find('.btn').val($(this).data('value')); });
-1
source

More articles:


All Articles