我有一个 Bootstrap 下拉列表,它通过 Knockout 绑定(bind)到一些数据,并且按预期工作。但是,当我在下拉列表中选择一个项目时,我希望能够将其显示为下拉文本。
JavaScript:
<script type="text/javascript">
$(".dropdown-menu li a").click(function () {
$(this).parents(".btn-group").find('.selection').text($(this).text());
$(this).parents(".btn-group").find('.selection').val($(this).text());
});
</script>
html:
<asp:Content ID="body" ContentPlaceHolderID="body" runat="Server">
<div id="main">
<div class="container">
<div data-bind="template: { name: 'TillGroups' }"></div>
</div>
</div>
<script id="TillGroups" type="text/html">
<label for="ddm">Till group:</label>
<div id="ddm" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: StockCount.ReadTillGroupsValue">
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name"></a></li>
</ul>
</div>
</script>
</asp:Content>
附注我在这里搜索了类似的问题,例如以下问题,但那里发布的答案似乎不起作用:
How to Display Selected Item in Bootstrap Button Dropdown Title
最佳答案
你可以做这样的事情
<script id="TillGroups" type="text/html">
<label for="ddm">Till group:</label>
<div id="ddm" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="text: selectedValue"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: StockCount.ReadTillGroupsValue">
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name, click: $root.selectGroupValue"></a></li>
</ul>
</div>
</script>
将数据绑定(bind)点击处理程序添加到您的 li
项目中,如下所示
<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name, click: $root.selectGroupValue"></a></li>
并在您的 View 模型中,将可观察值定义为
self.selectedValue = ko.observable("")
和一个点击处理程序
self.selectGroupValue = function(group){
self.selectedValue(group.Name)
};
关于javascript - 在 Bootstrap 下拉按钮中显示所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32923058/