Product category not being added to the order model. Craft Commerce

Question

I've created a form in which to specify a category for a product on the product entry page. I can't seem to add the category that the customer selects to the order model. I've checked the orders in the control panel and they do not seem to be storing the category. Does anybody know how to add a selected category to the order model?

<form id="values" method="POST"> 
     <input type="hidden" name="action" value="commerce/cart/updateCart">
     <input type="hidden" name="redirect" value="cart">
     ...
     <select id="chocOptions" name="chocolateOptions" class="options">
          <option title="selectOption">Select Option</option>
          {% for category in craft.categories.group('chocolate') %}
               <option value="{{ category.title }}">{{ category.title }}</option>
          {% endfor %} 
     </select> 
     ...
</form>

Answer 1

I never used Craft Commerce but you usually store relations (no matter which) with the id - not the title. So I expect the Commerce plugin will only recognize your category with this html

 <select id="chocOptions" name="fields[chocolateOptions][]" class="options">
      <option title="selectOption">Select Option</option>
      {% for category in craft.categories.group('chocolate') %}
           <option value="{{ category.id }}">{{ category.title }}</option>
      {% endfor %} 
 </select> 

And you have to name your field correctly like statet here

Edit
The easiest way to get to know how you have to build your html is the following

1. open the form in your Craft CP
2. Right click on the field
3. Click on "inspect" or "inspect element" or something like this
4. Search for the input or a hidden input. When I inspect a normal relation field it looks like this

<div class="element small removable hasstatus" data-id="13" data-locale="de" data-status="live"
     data-label="" data-url="" data-editable="">
    <!-- this is the important part -->
    <input type="hidden" name="fields[relation][]" value="13">
   <!-- end -->
    <a class="delete icon" title="Entfernen"></a>
    <span class="status live"></span>
    <div class="label">
        <span class="title">Some Name</span>
    </div>
</div>