[SOLVED] convert the list of items into dropdown list knockout js

convert the list of items into dropdown list knockout js

I'm new to knockout. May I know how should I convert this unordered list of items into dropdown list with same databinding.

<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 and Description are the properties of dropdown list in model. Thanks in advance.

Solution

Try the options binding.

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

In this example you will need to add a selectedReasonID property to your viewmodel to store the selected ID. You could also store the entire Reason object if you needed to.