将数据绑定添加到引导程序下拉列表

Adding Data-Bind to Bootrstrap Dropdown

本文关键字：引导程序 下拉列表 添加 数据绑定      更新时间：2023-09-26

我正在尝试通过数据绑定将值列表拉入Twitter引导程序下拉列表中。

<div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" data-bind="options: artists, optionsText: 'name', optionsValue: 'id', value:selectedArtistId">
            <li></li>
          </ul>
</div>

我遇到了Knockout_bootstrap JS，但不确定它是否适用于下拉菜单

http://billpull.github.io/knockout-bootstrap/

（未提供示例）

HTML

List vs HTML Select
引导下拉列表是一个 html 列表。 

<ul>
  <li></li>
</ul>

挖空 js options 绑定是 html select元素的绑定。 

<select>
   <option></option>
</select>

我不确定你想做什么，但是您目前正在做的是将KNOCKOUT选项绑定添加到<ul>，而绑定应该是<select>。

JS Bin
中的实时示例下面是 jsbin 中的一个示例，它在两种情况下都使用挖空进行绑定。

http://jsbin.com/ITOZUPI/1/edit

带有 ko 数据绑定的 HTML 的一部分

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
          </button>
  <ul class="dropdown-menu" role="menu" data-bind="foreach: my.VM.Artists">
    <li><a role="menuitem" tabindex="-1" href="#" data-bind="text: artistName, click: getTheArtist"></a></li>
</ul>
</div>
  <p>&nbsp;</p>
  <select data-bind="options: my.VM.Artists, 
                 optionsCaption: 'Please select an Artist...',  
                 optionsText: 'artistName', 
                 optionsValue: 'artistId',
                 value: my.VM.artist_selected"></select>
相关文章：