Javascript 更改下拉项选择上的下拉按钮文本

我正在尝试用HTML和CSS开发下拉框列表。我试图在单击下拉框列表时切换它。当我选择某个项目时，它不会出现在下拉按钮中

下面是我的代码

功能切换项{ $'.下拉菜单'.toggleClass'open'； } 功能测试{ var element=document.getElementByIdflat-example-2； 如果$element.hasglass'on'{ element.classList.removeon； }否则{ element.classList.addon； } } .下拉菜单{ 位置：绝对位置； 最高：100%； 左：0； z指数：1000； 浮动：左； 最小宽度：150px； 最大高度：600px； 溢出x：可见； 溢出y：可见； 填充：0； 保证金：0； 列表样式：无； 字体大小：13px； 字号：500； 文本对齐：左对齐； 背景色：FFFFFF； 边框：1px实心rgba0,0,0,0.15； 边界半径：0； -webkit盒阴影：0 6px 12px rgba0,0,0,0.175； 盒影：0 6px 12px rgba0,0,0,0.175； -webkit背景剪辑：填充框； 背景剪辑：填充框； 颜色：4646； 过渡：全部3秒； 转化：转化-100%； } 。下拉菜单。打开{ 转化：转化0%； } .btn集团， .btn组垂直{ 位置：相对位置； 显示：内联块； 垂直对齐：中间对齐； } toggle.btn-default{ 背景：dedede； 背景：rgba0,0,0,0.13； 边框：1px实心2E92FA； 颜色：4646； 大纲：无； } 过滤 传感器 执行器 数字输入 输出 转换器

---

当从列表中选择某个项目时，您似乎没有相应的事件

您需要附加一个click事件，最好附加到li元素，并在那里设置下拉列表的文本

e、 g

完整代码：

功能切换项{ $'.下拉菜单'.toggleClass'open'； } $'。下拉菜单li'。单击函数{ var text=$this.text；//获取单击项的文本 $.dropdown-toggle.texttext；//将文本文本设置为按钮下拉列表 }; 功能测试{ var element=document.getElementByIdflat-example-2； 如果$element.hasglass'on'{ element.classList.removeon； }否则{ element.classList.addon； } } .下拉菜单{ 位置：绝对位置； 最高：100%； 左：0； z指数：1000； 浮动：左； 最小宽度：150px； 最大高度：600px； 溢出x：可见； 溢出y：可见； 填充：0； 保证金：0； 列表样式：无； 字体大小：13px； 字号：500； 文本对齐：左对齐； 背景色：FFFFFF； 边框：1px实心rgba0,0,0,0.15； 边界半径：0； -webkit盒阴影：0 6px 12px rgba0,0,0,0.175； 盒影：0 6px 12px rgba0,0,0,0.175； -webkit背景剪辑：填充框； 背景剪辑：填充框； 颜色：4646； 过渡：全部3秒； 转化：转化-100%； } 。下拉菜单。打开{ 转化：转化0%； } .btn集团， .btn组垂直{ 位置：相对位置； 显示：内联块； 垂直对齐：中间对齐； } toggle.btn-default{ 背景：dedede； 背景：rgba0,0,0,0.13； 边框：1px实心2E92FA； 颜色：4646； 大纲：无； } 过滤 传感器 执行器 数字输入 输出 转换器

---

首先删除不相关的代码，如数据切换等。您需要将单击事件附加到下拉项以更改按钮文本

此外，没有必要在li内部使用div和标签…所以最好将其删除

$.btn-toggle.onclick，函数{ $'.下拉菜单'.toggleClass'open'； }; $.下拉菜单li.onclick，函数{ $'.btn toggle'.text$this.text； $'.dropdown menu'.removeClass'open'； }; .下拉菜单{ 位置：绝对位置； 最高：100%； 左：0； z指数：1000； 最小宽度：150px； 填充：0； 保证金：0； 列表样式：无； 字体大小：13px； 字号：500； 背景色：FFFFFF； 边框：1px实心rgba0,0,0,0.15； 盒影：0 6px 12px rgba0,0,0,0.175； 颜色：4646； 过渡：全部3秒； 转化：转化-100%； } 。下拉菜单。打开{ 转化：转化0%； } .btn组{ 位置：相对位置； 显示：内联块； 垂直对齐：顶部； } .下拉菜单li{ 保证金：5px； 光标：指针； } 过滤 传感器 执行器 数字输入 输出 转换器

---

不能说我真的知道你一开始想要触发什么。但除了ToggleItems之外，并没有其他函数被调用。我只是测试了你们的代码，每当我选择任何应该出现在下拉框列表中的项目时，它都会工作。它现在没有发生。您正在使用引导…？…因为您的代码中有引导类…？不，我没有使用引导。我正在使用我自己的css类。

$('.dropdown-menu li').click(function() {
  var text = $(this).text(); // get text of the clicked item
  $(".dropdown-toggle").text(text); // set text to the button (dropdown)
});