bootstrap下拉列表选中事件dropdown显示选中的内容
时间: 2023-08-01 16:10:03 浏览: 326
在Bootstrap中,可以通过监听`shown.bs.dropdown`事件来实现下拉列表选中事件的响应,并且可以在事件处理函数中使用`text()`方法获取选中项的文本内容,进而将选中项的文本内容显示在页面上。
下面是一个示例代码:
```html
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
```
```javascript
$(document).on('shown.bs.dropdown', '.dropdown', function () {
var selected = $(this).find('li.active');
var text = selected.text();
$(this).find('.dropdown-toggle').html(text + ' <span class="caret"></span>');
});
```
在上述代码中,我们在`shown.bs.dropdown`事件处理函数中获取到选中的列表项元素,并通过`text()`方法获取选中项的文本内容,最后将文本内容设置为下拉菜单按钮的文本内容。这样,当选中项变化时,按钮上显示的文本内容也会随之改变。
阅读全文
相关推荐

















