javascript - Bootstrap Dropdown：如何设置活动链接以在按钮上显示值？

Question

我创建了一个下拉列表，用于选择要在一页上显示的图像数量。我想设置一个默认值并在按钮本身而不是标签上显示该默认值。如果进行选择，我已经知道如何执行此操作，但不是默认值

$('.dropdown1 button').click(function(){
    $('#show').text($(this).text());
});

<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="btn-group btn-group1 mr-4">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span id="show"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right dropdown1">
        <button class="dropdown-item" type="button">24</button>
        <button class="dropdown-item" type="button">16</button>
        <button class="dropdown-item" type="button">32</button>
        <button class="dropdown-item" type="button">All</button>
    </div>
</div>

标签： javascriptjquerydrop-down-menubootstrap-4

Answer 1

您可以使用 anid设置所需的默认选定值，然后使用$(document).ready(...)事件通过jQuery.

---

在您希望成为默认值的“选项”上：

<button id="default-option" class="dropdown-item" type="button">24</button>

jQuery片段：

$('#show').text($(".dropdown1 button[id='default-option']").text());

---

像这样的东西：

$('.dropdown1 button').on('click', function(){
    $('#show').text($(this).text());
});

$(document).ready(function() {
  $('#show').text($(".dropdown1 button[id='default-option']").text());
});

<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="btn-group btn-group1 mr-4">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span id="show"></span>
    </button>
  <div class="dropdown-menu dropdown-menu-right dropdown1">
    <button id="default-option" class="dropdown-item" type="button">24</button>
    <button class="dropdown-item" type="button">16</button>
    <button class="dropdown-item" type="button">32</button>
    <button class="dropdown-item" type="button">All</button>
  </div>
</div>