title: Add titles to a list
body: <p>I have a select field with a list of fees, every fee has an id, description and status- New or Old.</p>
  
  <pre><code>&lt;select id="feesSelect" data-bind="options: $root.fees(), optionsText: 'description', optionsValue: 'feesID', value: feeID(), optionsCaption: 'Choose Fee'"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>The list is ordered by status.</p>
  
  <p>How can I add titles to the <code>option</code> elements within the list, according to the status- one title: <code>new</code> and one: <code>old</code>.</p>
  
  <p>I need my list to look like that:</p>
  
  <ul>
  <li><code>NEW --title</code></li>
  <li><code>test1 --option (fee description)</code></li>
  <li><code>test2 -option (fee description)</code></li>
  <li><code>OLD --title</code></li>
  <li><code>test3 --option (fee description)</code></li>
  <li><code>test4 --option (fee description)</code></li>
  </ul>
  
  <p>I tried that- but it's not working:</p>
  
  <pre><code>&lt;select id="feesSelect" data-bind="foreach: $root.fees(), value: feeID()&gt;
        &lt;option data-bind="value: feesID, text: description, attr: {title: status}"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>