在 jQuery 中处理 Bootstrap 下拉事件
Posted
技术标签:
【中文标题】在 jQuery 中处理 Bootstrap 下拉事件【英文标题】:Handle Bootstrap dropdown event in jQuery 【发布时间】:2019-04-25 20:22:29 【问题描述】:我有 twitter bootstrap 下拉菜单的标记,如下所示
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
现在,使用 jquery 在下拉列表中添加点击事件,如下所示
$('.dropdown-menu a').click(function ()
alert("Hi")
);
我的点击事件正在工作,但我无法更新下拉列表中的选定值。怎么做?
【问题讨论】:
是否要将选中的文字设置为按钮文字? @Kiranramchandran 是的 查看答案 【参考方案1】:$('.dropdown-menu a').click(function ()
$('button').text($(this).text());
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
使用$('button').text($(this).text());
为按钮设置值。
【讨论】:
【参考方案2】:试试这个
$('.dropdown-menu a').click(function ()
$('button[data-toggle="dropdown"]').text($(this).text());
);
DEMO HERE
【讨论】:
以上是关于在 jQuery 中处理 Bootstrap 下拉事件的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap下拉框的例子,提示Error: Bootstrap's JavaScript requires jQuery
惊闻放弃jQuery,拥抱Bootstrap,FineUI新版效果超炫!
python测试开发django-168.jquery的clone()后 bootstrap-select 中 selectpicker 下拉框选择无效问题解决
我下载了 bootstrap 5 和 jquery 3.6,问题是当我嵌入它们时,下拉按钮不起作用我的代码中是不是缺少任何东西?