BS4更改下拉按钮值以匹配选定的下拉值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (7)

我正在尝试获取我的BS4下拉菜单,以在下拉切换按钮中显示用户选择的值,即 .dropdown-toggle

这个问题之前已经在这里被问过但是它使用BS3框架有点过时了。它也没有提供多次使用下拉列表的方法。

我的jsFiddle在这里显示了我目前面临的问题,即我如何调整之前链接的解决方案。

BS4下拉列表

<div class="btn-group">
  <button class="btn btn-sm dropdown-toggle px-0 mr-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Sort by:
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Most Recent</a>
    <a class="dropdown-item" href="#">Popular</a>
    <a class="dropdown-item" href="#">Trending</a>
    <a class="dropdown-item" href="#">Acending</a>
    <a class="dropdown-item" href="#">Decending</a>
  </div>
</div>

我的Jquery尝试

// Find all drop downs and check their classes.
$(".dropdown-menu a").click(function() {

  // Find the dropdown toggle and append the text.
  $(".dropdown-toggle:first-child").append($(this).text());

});

问题: 如果页面上的所有下拉列表都没有受到影响,我怎样才能达到我想要的结果?此外,我还需要在选择新值时删除附加的文本。 我追求的结果; button value = 'Sort by: Most Recent'

提问于
用户回答回答于

试试这个

$(".dropdown-menu a").click(function() {
   //this one is add and remove active class
   $(this).closest('.btn-group').find(".dropdown-menu a").removeClass('active');
   $(this).addClass('active');
    //this one is for append text in button tag
    $(this).closest('.btn-group').find('button').append($(this).text())
   });
});

热门问答

无服务器云函数可以通过api直接接收formdata的图片吗?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
通过网关上传前,需要先自己做base64 encode,然后在event里直接读body,转成文件。 控制台上有demo参考:图片转文字 local_path = u'/tmp/{}'.format(file_name) with open(local_path, 'w...... 展开详请

MySQL还要另外购买吗?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐已采纳
您好,您可在服务器中自建MySQL ,同时腾讯云提供数据库 MySQL(TencentDB for MySQL)让用户可以轻松在云端部署、使用 MySQL 数据库。MySQL 是世界上最流行的开源关系数据库,通过云数据库 MySQL,您在几分钟内即可部署可扩展的 MySQL ...... 展开详请

腾讯一句话语音识别为什么识别不了微信公众号临时下载的语音?

腾讯云智能语音服务员

腾讯 · 社区FAQ (已认证)

推荐

如果只是单纯的转换后缀,那么仍然还是没办法识别的,需要用特定的工具转化为正常的wav类型音频。识别结果为空有可能是采样率不匹配,目前一句话识别只支持8k和16k的采样率的音频识别。

实时语音识别支持c#平台吗?

支持的。虽然SDK没有C#的,但是可以通过API进行请求

腾讯云日志服务,如何多人查看日志?

何小路焊过板子,搬过砖,想不开,转行做了产品汪
推荐

智能钛 tensorflow如何升级?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐
可以升级的,方法示例如下: import os os.system("pip install tensorflow-gpu==1.12") import tensorflow as tf print(tf.__version__) image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券