【问题标题】：(Bootstrap) - Changing dropdown button text to reflect item clicked removes caret（引导程序） - 更改下拉按钮文本以反映单击的项目删除插入符号
【发布时间】：2015-12-06 09:59:21
【问题描述】：

我正在使用引导程序中的下拉菜单，我希望按钮的文本根据我单击的两个下拉项目中的哪一个而改变。文本根据单击的项目而更改，但插入符号在第一次更改后消失，依此类推。我想在按钮中保留插入符号！

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

【问题讨论】：

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是 bootstrap 3 唯一且唯一的永久解决方案。这适用于所有下拉菜单。

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

【讨论】：

【解决方案2】：

你可以试试：

$(".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'));
});

【讨论】：

【解决方案3】：

.innerHTML 将为您提供全部内容，包括您用于插入符号的内部 span。

您需要的是下拉列表中firstchild 的textContent，它实际上是一个textNode。

示例片段：

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>

【讨论】：

【解决方案4】：

在下拉函数中使用innerText而不是innerHTML

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

更改函数的内容以替换保存按钮值的 firstChild 的 textContent。

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>

【讨论】：

【解决方案5】：

您可以将插入符号保存在变量中，并在更改值时将其添加回来。当您使用引导程序时，您已经在页面中加载了 jQuery，所以让我们这样做：

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>

【讨论】：

【解决方案6】：

发生这种情况是因为您将 html 替换为该值 - 插入符号跨度是 inside 按钮（因此是按钮的 html 的一部分），所以也被替换。

当您使用使用 jquery 的引导程序时，请使用 jquery 来简化：

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

【讨论】：

【解决方案7】：

使用您当前的代码，附加插入符号图标代码将帮助您在更改下拉值后保留它。

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>

【讨论】：

在问这个问题之前我已经尝试过了，但我显然忘记在跨度周围添加单引号。谢谢！
是的，它发生了 :) 以后尝试检查您的控制台是否有错误。
只是一个小警告：您现在在两个地方定义了图标。如果出于某种原因，您决定使用与“插入符号”不同的图标（例如“glyphicon-circle-arrow-down”），那么您必须在这两个位置进行更改。最好的做法是避免通过 js 重新创建现有的 html - 但如果它在这种情况下有效并且您对此感到满意，那么不用担心。