将项目列表转换为下拉列表淘汰js

Posted 2023-03-27

【中文标题】将项目列表转换为下拉列表淘汰js

【英文标题】：convert the list of items into dropdown list knockout js

【发布时间】：2019-03-14 16:19:55

【问题描述】：

我是淘汰赛的新手。请问我应该如何将这个无序列表的项目转换为具有相同数据绑定的下拉列表。

<div class="col-lg-4 col-md-4 col-sm-4">
  <h4>Select a Request Reason:</h4>
   <ul class="nav nav-pills nav-stacked" data-bind="foreach: Reasons">
      <li role="presentation" data-bind="css:  'active': Id() === $parent.Request().ReasonId() ">
       <a href="#" data-bind="text: Title(), click: $parent.SelectReason"></a>
      </li>
   </ul>
</div>

Id、Title 和Description 是模型中下拉列表的属性。提前致谢。

【问题讨论】：

你看过options binding吗？

感谢@user3297291

【参考方案1】：

尝试options 绑定。

<select data-bind="options: Reasons, optionsText: 'Title', optionsValue: 'Id', value: selectedReasonID, optionsCaption: 'Please select a reason'"></select>

在此示例中，您需要将 selectedReasonID 属性添加到您的视图模型以存储所选 ID。如果需要，您还可以存储整个 Reason 对象。