Javascript 如何更换按钮'；是否使用jQuery将文本与列表项文本合并？

我希望我的“主”按钮上的文本替换为下拉菜单中单击的列表“项”文本。我使用的jQuery代码不起作用。我尝试过其他方法，但也不管用。我有办法解决这个问题吗？很抱歉给您添麻烦

您有几个选择器错误

更改此项：

$(function(){
  $(".dropdown-menu a").click(function(){
    $(".dropbtn:first-child").text($(this).text());
    $(".dropbtn:first-child").val($(this).text());
  });
});

为此：

$(function() {
  $(".dropdown-content a").click(function() {
    $('#mainspan').text($(this).text());
    $(".dropdown-content").toggle();
  });
});

---

代码片段：

/*单击后主菜单将下降*/
$（文档）.ready（函数（）{
$（“.dropbtn”）。单击（函数（）{
$（this.toggleClass（'active'）；
$（“.dropdown content”）.toggle（）；
});
});
/*替换按钮文本的代码*/
$（函数（）{
$（“.dropdown内容a”）。单击（函数（）{
$（'#mainspan'）.text（$（this.text（））；
$（“.dropdown content”）.toggle（）；
});
});
.dropdown main{
位置：相对位置；
显示：内联块；
}
.dropbtn{
宽度：115px；
高度：28px；
边框：实心1px#cebbb1；
背景色：白色；
颜色：#897f63；
左边距：-5px；
位置：相对位置；
光标：指针；
}
.dropbtn.active{
边框：实心1px#0093dc；
颜色：#0093dc；
}
#主跨{
字体大小：粗体；
位置：绝对位置；
左侧填充：7px；
垫面：4px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：160px；
z指数：1；
边框：实心1px#cebbb1；
宽度：170px；
左边距：-5px；
}
.下拉内容a{
填充：1px14px；
显示：块；
颜色：#897f63；
文字装饰：无；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
文字装饰：无；
颜色：#897f63；
}

主要
Phew，这太令人困惑了！非常感谢您的帮助，此解决方案轻松解决了我的问题！