Question

一直在使用此下拉列表：

<div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   company
   <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li><a href="#">google</a></li>
  <li><a href="#">apple</a></li>
  <li><a href="#">microsoft</a></li>
  <li><a href="#">facebook</a></li>
  <li><a href="#">adobe</a></li>
  <li class="divider"></li>
  <li><a href="#">other</a></li>
 </ul>
</div>

当有人点击其中一个选项时，我想将“公司”文本更新为所选选项。我能够使用$（'＃company'）。text（' update goes here '）;但是使用它会破坏下拉文本旁边的位置。关于这一个的任何指导？谢谢！

Answer 1

你应该.append值而不是.text这样：

$（'＃company'）。append（new value）;

或者您可以将其附加到范围

 $('#company span').append(new value);

Answer 2

如果您使用的是jquery，则应该可以使用.html（）来指定按钮文本的值。

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span id="company-name">company</span><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">google</a></li>
    <li><a href="#">apple</a></li>
    <li><a href="#">microsoft</a></li>
    <li><a href="#">facebook</a></li>
    <li><a href="#">adobe</a></li>
    <li class="divider"></li>
    <li><a href="#">other</a></li>
  </ul>
</div>

为按钮添加了一个ID，然后使用jquery：

引用它

$("#company-name").html("company-name-here");

选择公司名称作为参数。

Answer 3

只需将文字换成一个范围：

 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   <span id="cie">company</span>
   <span class="caret"></span>
 </button>

然后更新范围的文本：

$('#cie').html('your text');

Answer 4

将此添加到您的JavaScript代码中：

$(function(){
$(".dropdown-menu li a").click(function(){

  $(".btn:first-child").text($(this).text());
  $(".btn:first-child").val($(this).text());
});

}）;

请参阅此fiddle。

Answer 5

如果您无法使用元素包装文本，

Demo

function getChildText(node) {
    var text = "";
    for (var child = node.firstChild; !! child; child = child.nextSibling) {
        if (child.nodeType === 3) {
            text += child.nodeValue;
        }
    }
    return text;
}

$(".btn-primary").click(function () {
    $(this).html($(this).html().replace(getChildText(this).trim(), "New Value"));
});

更新下拉按钮文本（不破坏<span>）？</span>

5 个答案: