如何更改按钮中的文本而不更改其他标签

时间:2013-11-09 06:03:35

标签: javascript jquery html

如何更改按钮中的文字而不更改其他标签?

我的按钮:

<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>

我的下拉菜单:

<ul class="dropdown-menu">
 <li><a id="AllItems" href="#">AllItems</a></li>
<li><a id="Countries" href="#">Countries</a></li>
<li><a id="Ships" href="#">Ships</a></li>
</ul>

我尝试了以下操作但是已删除了span标记:

 $('.dropdown-menu li a').click(function () {
 var item = $(this).text();
$('button[id=ItemForSearch]').text(item);
});

我需要更改文字。但我不知道!!

1 个答案:

答案 0 :(得分:2)

您只需要替换按钮中的第一个文本节点,这就是问题所在。当您使用.text().html()时,它会替换按钮的全部内容。

尝试

$('.dropdown-menu li a').click(function () {
    $('#ItemForSearch').contents().eq(0).replaceWith($(this).text());
});

演示:Fiddle