Question

在这里，我有一个下拉按钮，下拉菜单中有以下三个列表。当我单击下拉列表中的列表时，它必须用下拉列表中的列表名称替换名称。帮我解决这个问题。提前致谢。此处是小提琴链接https://jsfiddle.net/e8bny3kv/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

Answer 1

尝试一下

`$('.dropdown-item').click(function() {
    $('.dropdown-toggle').html($(this).html());
});`

Answer 2

也许您想要这样的东西：

document.querySelector('.dropdown>button').addEventListener('click',function(e){
e.currentTarget.innerText = 'focused';
});

Answer 3

您可以使用此 JS fiddle

$('.dropdown-item').click(function(){
    $(this).parent().parent().parent().find('.dropdown-toggle').html(($(this).text()))
})

Answer 4

您可以使用简单的Javascript-

尝试这个小提琴-https://jsfiddle.net/z1qbfgcp/1/

let dropDownItem = document.querySelectorAll('.dropdown-item')
   dropDownItem.forEach(item => {
      item.addEventListener('click', function(){
        this.closest('.dropdown').children[0].innerText = this.innerText
      })
  })

Answer 5

$(".dropdown-menu a").click(function() {
$("button").text($(this).text());

})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>

Answer 6

您可以为此使用CSS，只需删除“下拉按钮”文本并使用:: before伪元素即可使文本在不同状态下更改。

.dropdown.show .dropdown-toggle::before{
  content:'Dropdown button: open'
}
.dropdown-toggle::before{
  content:'Dropdown button: close'
}

单击时将标题名称替换为下拉名称

6 个答案: