Bootstrap Dropdown：如何设置活动链接以在按钮上显示值？
[英]Bootstrap Dropdown: How to set active link to display value on button?
问题描述
我创建了一个下拉列表，用于选择要在一页上显示的图像数量。 我想设置一个默认值并在按钮本身而不是标签上显示该默认值。 我已经知道如何在进行选择时执行此操作，但不是默认值
$('.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>
2 个解决方案
解决方案1
2 已采纳 2019-12-28 20:59:24
您可以使用id设置所需的默认选定值，然后使用$(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>
解决方案2
1 2019-12-28 22:18:27
这是我如何做到的。 设置 id="default" 并将 $('#show).text() 设置为 $('#default).text()。 似乎工作。
$('#show').text($('#default').text()); $('.dropdown1 button').click(function(){ $('#show').text($(this).text()); });
<html> <head> </head> <body> <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" id="default">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> <script src="index.js"></script> </body> </html>
如何通过单击Javascript中的链接来设置带有链接值的下拉列表值
[英]How to set dropdown list value with the value of a link by clicking that link in Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.