更改单个下拉列表的值

Question

我运行遇到了一个问题，我不确定如何解决它。我有 5 个下拉按钮，当我 select 第一个下拉菜单中的一个选项时，它会将所有 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>");
});

更改单个下拉列表的值

Change value of single dropdown

javascript

jquery

dropdown