Javascript 是否更新下拉按钮文本（不销毁<；span>；）？

正在使用此下拉列表：

<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”）来实现这一点；但是，使用此选项会破坏放置在下拉文本旁边的文本。对这个有什么指导吗？谢谢

您应该。追加值，而不是。文本如下：

$（“#公司”）。追加（新值）

或者可以将其附加到跨度中

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

---

如果您使用的是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>

---

选择公司名称作为参数。

只需将文本换行：

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

---

将此添加到JavaScript代码中：

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

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

}))

---

见此。

如果无法用元素包装文本

---

对不起，我不太清楚你在这里是什么意思？我想做的就是用从下拉菜单中选择的选项更新下拉按钮的文本。这似乎没有给出所需的行为。从下拉列表中选择一个选项后，用户“company”现在应该阅读他们选择的选项。不是“company”+他们选择的选项，所以只需在$（“#company span”）上使用.text，但它会在span中插入值。更新后为公司名称添加span，或者您可以在前面加上，

$（“#company name”）。在前面加上（“此处的新名称”）如果不想添加另一个跨距，只需更新按钮html即可。
$('#cie').html('your text');

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

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

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"));
});