我有一个 Bootstrap 下拉菜单,但我无法将所选菜单项设置为默认所选下拉菜单项?
<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>
我创建了一个JSFiddle对于上面的代码。
最佳答案
试试这个
$(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>
关于javascript - jQuery/Bootstrap : dropdown-toggle is not setting the selected menu item as default selected item,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37552805/