javascript - 在 Bootstrap 下拉按钮中显示所选项目

Question

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

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

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

将数据绑定(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)
};