I have a bootstrap dropdown but i am not able to set the selected menu item as default selected dropdown item?
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script>
$('.dropdown-toggle').click(function()
{
$('.dropdown-menu').toggle();
});
</script>
I have created a JSFiddle for the above code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script type="text/javascript">
$('.dropdown-item').click(function(){
$("#drpDownCat").text(this.text)
});
</script>
</body>
</html>
Try this
$(function() { $(".dropdown-menu li a").click(function() { $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select a Category<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="drpDownCat"> <li><a class="dropdown-item" href="#">Category 1</a> </li> <li><a class="dropdown-item" href="#">Category 2</a> </li> <li><a class="dropdown-item" href="#">Category 3</a> </li> <li><a class="dropdown-item" href="#">Category 4</a> </li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.