Ive been stumped by this issue for hours now. I have a navbar in my html page with a dropdown button and some options. When I click on the button I can see my options. I wanted the button text to change when you select an option.
P.S. Copy and pasting the code under Html and Javascript in codepen will work perfectly. For some reason my account keeps giving me an error popup right now. If its resolves Ill post the codepen link
Html-
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<div class="navbar-form">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account Div <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Hollywood Account</a></li>
<li><a href="#">Another Account</a></li>
<li><a href="#">Yet another Account</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
Javascript-
$('.dropdown-menu li a').click(function () {
$('.btn:first-child').html($(this).text() + ' <span class="caret"></span>');
});
I just can figure out what the issue is. At this point I think I am probably includin the worng js files for bootstrap which are as follows:
within the <head> tag I have:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/sidebar.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script>
$(".dropdown-menu .dropdown-menu-right li a").click(function(){
$(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
});
</script>
And at the botton of the page I have:
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
