Menu
I am using the dropdown from bootstrap and i would like the button to have its text change depending on which of it's two dropdown items i click. The text changes according to the item clicked but the caret is gone after the first change and so forth. I want to keep the caret 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>
541
asked Sep 10 '15 08:09
With your current code, appending the caret icon code will help you retain it after changing the drop down value.
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>.innerHTML will get you the entire content, including the inner span that you are using for the caret.
What you need is the textContent of the firstchild of your dropdown, which is actually a textNode.
Example Snippet:
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>This is happening because you're replacing the html with the value - the caret span is inside the button (so part of the html of the button), so also getting replaced.
As you're using bootstrap, which uses jquery, use jquery to make this easy:
function dropdown(val) {
$(".btn.dropdown-toggle").text(val)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
