在 Bootstrap 下拉按钮中显示所选项目答案

【问题标题】：Displaying selected item in a Bootstrap dropdown button在 Bootstrap 下拉按钮中显示所选项目
【发布时间】：2015-10-03 13:19:08
【问题描述】：

我有一个 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>

附：我在这里搜索了类似的问题，例如以下问题，但那里发布的答案似乎不起作用：

How to Display Selected Item in Bootstrap Button Dropdown Title

How to display selected item in the title of the bootstrap dropdown list ? and how to display selected item on a javascript alert box?

【问题讨论】：

请参阅billpull.com/knockout-bootstrap 以了解绑定 Bootstrap 小部件。在您的代码中混合使用 jQuery 和淘汰赛势必会令人沮丧。
@RoyJ 我在那里看不到任何类似于下拉列表的内容。 (?)
那么您可能必须滚动自己的绑定处理程序。或者看起来 Dandy 提供了一个使用绑定处理程序的解决方案。关键是，绕过 Knockout 来操作 DOM 是个坏主意。

标签： javascript jquery html twitter-bootstrap knockout.js

【解决方案1】：

你可以这样做

<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)
};

【讨论】：