CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Sneb
Sneb

Reputation: 151

(Bootstrap) - Changing dropdown button text to reflect item clicked removes caret

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>

Upvotes: 6

Views: 8192

Answers (7)

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2595

This is the one and only permanent solution for bootstrap 3.This will work for all dropdown.

<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">
         <li>Fast</li>
         <li>Accurate</li>
      </ul>
   </div>
   <script>
      $(document).on('click','.dropdown-menu li',function(){
          $(this).parent().parent().find('.dropdown-toggle').html($(this).html()  + ' <span class="fa fa-caret-down"></span>');
      });
   </script>

Upvotes: 0

Anil Vishwakarma
Anil Vishwakarma

Reputation: 1

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'));
});

Upvotes: -1

Abhitalks
Abhitalks

Reputation: 28387

.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>

Upvotes: 3

Sagi
Sagi

Reputation: 9284

Use innerText in the dropdown function instead of innerHTML

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

Change the content of the function to replace the textContent of the firstChild which holds the value of the button.

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>

Upvotes: 1

Ramtin Gh
Ramtin Gh

Reputation: 1050

You can save the caret inside a variable and add it back when you change the value. As you are using bootstrap, you already have jQuery loaded in the page so let's do it this way:

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>

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28611

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) 
}

Upvotes: 1

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 6

Related Questions