(Bootstrap) -更改下拉按钮文本以反映所单击的项目删除插入符号

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

本文关键字：单击 项目 符号 插入 删除 文本 Bootstrap 按钮      更新时间：2023-09-26

我使用的是从引导下拉，我希望按钮有它的文本变化取决于它的两个下拉项目我点击。文本根据所单击的项目而更改，但在第一次更改之后插入符号就消失了，依此类推。我想在按钮中保留插入符号!

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

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

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将为您提供整个内容，包括您用于插入符号的内部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>

这是因为您正在用值替换html -插入符号span 在按钮内(因此是按钮html的一部分)，因此也被替换。

当您使用bootstrap时，它使用jquery，使用jquery使这变得容易:

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

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

<标题>小提琴h1> P_7
<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>

在下拉函数中使用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>

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

您可以尝试:

$(".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'));
});
相关文章：