Displaying selected item in a Bootstrap dropdown button

Question

I've got a Bootstrap dropdown list which is bound to some data with Knockout and that works as expected. However, when I select an item in the dropdown, I want to be able to display that as the dropdown text.

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>

P.S. I've search on here for similar questions such as the following but the answers posted there don't appear to work:

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?

See http://billpull.com/knockout-bootstrap/ for binding Bootstrap widgets. Mixing jQuery and knockout in your code is bound to frustrate. — Roy J, Oct 03 '15 at 15:21
@RoyJ I don't see anything on there similar to a dropdown list. (?) — Bhav, Oct 03 '15 at 16:09
You may have to roll your own binding handler, then. Or it looks like Dandy has offered a solution that uses binding handlers. The point is, reaching around Knockout to manipulate the DOM is a Bad Idea. — Roy J, Oct 03 '15 at 23:56

score 1 · Accepted Answer · answered Oct 03 '15 at 20:38

You can do something like this

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

add data bind click handler to your li items as

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

and in your view model, define a observable as

self.selectedValue = ko.observable("")

and a click handler as

self.selectGroupValue = function(group){
    self.selectedValue(group.Name)
};

Displaying selected item in a Bootstrap dropdown button

1 Answers1