Question

我正在尝试获取BS4下拉菜单，以在下拉切换按钮（即wait4(4973, error: unable to unlink old 'signal/dev/dev.clj': Permission denied error: unable to unlink old 'signal/src/clj/signal/lot.clj': Permission denied error: unable to unlink old 'signal/src/clj/signal/web.clj': Permission denied M signal/dev/dev.clj M signal/src/clj/signal/lot.clj M signal/src/clj/signal/web.clj Switched to branch 'master' Your branch is up to date with 'origin/master'. [{WIFEXITED(s) && WEXITSTATUS(s) == 0}], 0, NULL) = 4973 --- SIGCHLD {si_signo=SIGCHLD, si_code=CLD_EXITED, si_pid=4973, si_uid=1000, si_status=0, si_utime=0, si_stime=0} --- exit_group(0) = ? +++ exited with 0 +++

中向用户显示所选值）

此问题先前已经提出过here，但由于它使用BS3框架，因此已经有些过时了。它也没有提供多次使用下拉菜单的方法。

我的jsFiddle在这里显示了我现在如何适应早先链接的解决方案时遇到的问题。

BS4下拉列表

.dropdown-toggle

我的Jquery尝试

<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>

问题：

如何在页面上没有所有下拉菜单的情况下达到期望的结果   受到影响了吗？此外，我还需要删除附加的文本   选择新值时。

我追求的结果； // 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()); });

Answer 1

尝试

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

Answer 2

经过大量测试，我终于使用以下方法达到了目标。感谢@Vinee提供的指导。

您可以通过以下方式查看工作示例： JSFiddle here ;

我评论了我的代码，希望它对那些了解它的人来说使事情变得更容易理解。

这对我有用...

$("document").ready(function() {

  // The timeout is to wait the click, so the elements can render correctly.
  setTimeout(function() {

    // Trigger the active class on DOM Ready...
    $('.btn-group').find('.active').trigger('click');

  }, 10);

});


// On dropdown child click do...
$(".dropdown-menu a").click(function() {

  // Remove any existing 'active' classes...
  $(this).closest('.btn-group').find(".dropdown-menu a").removeClass('active');

  // Add 'active' class to clicked element...
  $(this).addClass('active');

  // Remove any previous '<span class="appended">'
  // This is needed so the values reset when a new option is clicked...
  $(this).closest('.btn-group').find('.appended').remove();

  // Add a new '<span class="appended">' element -
  // and fill it with the clicked elements text
  $(this).closest('.btn-group').find('button').append('<span class="appended">' + $(this).text() + '</span>');

});

希望这可以帮助某个人。对我来说很讨厌... xD

关于-B。

Answer 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<title>Lorem Ipsum Dolor </title>

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

3 个答案:

这对我有用...