更改单个下拉列表的值

Question

我遇到了一个问题，我不知道如何解决它。我有 5 个下拉按钮，当我从第一个下拉菜单中选择一个选项时，它会将所有 5 个下拉菜单的选项更改为该选项。

非常感谢您提供任何帮助：D（p.s. 我只从 1 个按钮复制了 1 个代码块。另请注意，所有 5 个下拉菜单都在同一个模式中）。

我试图用来更新它的功能是

$(".dropdown-menu li a").click(function() {
  $("#Communityone").text($(this).text());
  $("#Communityone").val($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="Communityone" data-toggle="dropdown">Choice 1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="c11">
    <div class="col-md-2">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">SpeedRunner</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Giveaway</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Community</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Interactive</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chill</a>
      </li>
      <p></p>
    </div>
    <div class="col-md-2">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Beta</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">exampl</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a>
      </li>
      <p></p>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">example</a>
      </li>
      <p></p>
    </div>

Answer 1

Demo

$("div.dropdown ul li").on("click",function()
{
    $(this).parents(".dropdown").find("button").html($(this).text()+" <span class='caret'></span>");
});