在引导下拉按钮中显示选定的项目

Displaying selected item in a Bootstrap dropdown button

本文关键字：显示 项目 按钮      更新时间：2023-09-26

我有一个Bootstrap下拉列表，它与Knockout绑定到一些数据，并按预期工作。但是，当我在下拉菜单中选择一个项目时，我希望能够将其显示为下拉文本。

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>

注:我在这里搜索类似的问题，如以下，但答案张贴在那里似乎不工作:

如何在引导按钮下拉菜单中显示选定项目标题

如何在引导下拉列表的标题中显示选定的项目?以及如何在javascript警告框上显示所选项目?

你可以这样做

<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>

添加数据绑定点击处理程序到您的li项目

<li><a role="menuitem" tabindex="-1" href="#" data-bind="text: Name, click: $root.selectGroupValue"></a></li>

，在视图模型中定义一个可观察对象

self.selectedValue = ko.observable("")

和一个点击处理程序作为

self.selectGroupValue = function(group){
    self.selectedValue(group.Name)
};
相关文章：