change text in 2 dropdown menu

Profile picture for Gilang Hungkul
Gilang Hungkul

I can run this code below, but the problem is when I click messages > Inbox (or other child) the text on Admin changes both dropdowns.

Here's my code:

<!-- begin snippet: js hide: false --> <!-- language: lang-html --> 
<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://cdn6.f-cdn.com/js/jquery-1.7.1.min.js?v=69e9edb32340c72a95b174dee04a036e&amp;m=2" type="text/javascript"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<style type="text/css">
	.bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-value="Inbox">Inbox</a></li>
                            <li><a href="#" data-value="Drafts">Drafts</a></li>
                            <li><a href="#" data-value="Sent Items">Sent Items</a></li>
                            <li class="divider"></li>
                            <li><a href="#" data-value="Trash">Trash</a></li>
                        </ul>
                    </li>
                </ul>
				<script>
				$(".dropdown-menu li a").click(function(){
  $(this).parents(".collapse").find('.dropdown-toggle').text($(this).text());
  $(this).parents(".collapse").find('.dropdown-toggle').val($(this).data('value'));
});
</script>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Settings</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>
</body>
</html>
<!-- end snippet -->

Just to illustrate your problem:

By navigating to the .collapse class, you jumped to the parent of both .dropdowns.

<pre><code>&lt;div class=&quot;<b>collapse</b> navbar-collapse&quot; &gt; &lt;ul class=&quot;nav navbar-nav&quot;&gt; &lt;li class=&quot;<b>dropdown</b>&quot;&gt; &lt;a class=&quot;dropdown-toggle&quot;&gt;&lt;/a&gt; &lt;ul class=&quot;<b>dropdown-menu</b>&quot;&gt; &lt;li&gt;&lt;<b>a</b> href=&quot;#&quot;&gt;Inbox&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt; &lt;li class=&quot;<b>dropdown</b>&quot;&gt; &lt;a class=&quot;dropdown-toggle&quot;&gt;&lt;/a&gt; &lt;ul class=&quot;<b>dropdown-menu</b>&quot;&gt; &lt;li&gt;&lt;<b>a</b> href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>

As far as Javascript, I'd use closest so you can stop searching after you find the first instance and then save the DOM element in your search so you don't have to perform the lookup twice:

$(".dropdown-menu li a").click(function() {
  var $toggle = $(this).closest(".dropdown").find('.dropdown-toggle');
  var value = $(this).data('value')
  var text = $(this).text()
  
  $toggle.val(value);
  $toggle.text(text);
});
<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$(".dropdown-menu li a").click(function() {
  var $toggle = $(this).closest(".dropdown").find('.dropdown-toggle');
  var value = $(this).data('value')
  var text = $(this).text()
  
  $toggle.val(value);
  $toggle.text(text);
});
<!-- language: lang-css --> 
.bs-example{
  margin: 20px;
}
<!-- language: lang-html --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="bs-example">
  <nav id="myNavbar" class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" 
                data-toggle="collapse" 
                data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" 
           id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Messages <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#" data-value="Inbox">Inbox</a></li>
              <li><a href="#" data-value="Drafts">Drafts</a></li>
              <li><a href="#" data-value="Sent Items">Sent Items</a></li>
              <li class="divider"></li>
              <li><a href="#" data-value="Trash">Trash</a></li>
            </ul>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
              Admin <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li class="divider"></li>
              <li><a href="#">Settings</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </nav>
</div>
<!-- end snippet -->