[英]How to change the main display of dropdown when an item is selected in bootstrap
This is the following http://jsfiddle.net/coderslay/enzDx/ 这是以下http://jsfiddle.net/coderslay/enzDx/
I am trying to change the text Select as soon as an item is clicked 我试图在单击项目时立即更改文本选择
So if i select One
from the list then One
should be displayed. 所以,如果我选择
One
从列表,然后One
应该显示。
How to do it? 怎么做?
Working example: http://jsfiddle.net/enzDx/5/ 工作示例: http : //jsfiddle.net/enzDx/5/
The only change I made to your HTML was to wrap the text "Select" with span
tags with the element ID dropdown_title
so it was easier to update. 我对HTML做的唯一更改是使用带有元素ID
dropdown_title
span
标记包装文本“Select”,以便更新。
JavaScript: JavaScript的:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
$('#dropdown_title').html($(this).find('a').html());
});
Basically all I'm doing is whenever the user clicks on a list item, I update the drop-down title text with the text of the link contained in the last item. 基本上我所做的只是当用户点击列表项时,我使用最后一项中包含的链接文本更新下拉标题文本。
You can check the click
event on the dropdown-menu
: 您可以在
dropdown-menu
查看click
事件:
$('.dropdown-menu > li').click(function() {
var $toggle = $(this).parent().siblings('.dropdown-toggle');
$toggle.html("<i class=\"icon icon-envelope icon-white\"></i> " + $(this).text() + "<span class=\"caret\"></span>")
});
jsFiddle : http://jsfiddle.net/enzDx/6/ . jsFiddle: http : //jsfiddle.net/enzDx/6/ 。
HTML: HTML:
<ul class="nav nav-pills left">
<li class="dropdown active span8">
<a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown">
<i class="icon icon-envelope icon-white"></i>
<span id="text">Select</span><span class="caret"></span>
</a>
<ul ID="divNewNotifications" class="dropdown-menu">
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
</ul>
</li>
</ul>
JavaScript: JavaScript的:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li > a').click(function(){
$('#text').text($(this).html());
});
I have just added a span around the Select
text in html to do the Javascript code simpler. 我刚刚在html中的
Select
文本中添加了一个范围,以简化Javascript代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.