Populate a SLDS picklist dynamically with SelectOptions

Question

So I am looking to populate a picklist with values from a controller. Currently I can pass it to visualforce by passing a simple list. However, I suspect, with the SLDS it requires an iterator of sorts.

https://www.lightningdesignsystem.com/components/menus/#flavor-picklist

Controller method to return list of select option

public List<selectOption> getDates(){
  List<date> dates = new List<date>();
  dates.add(new selectoption('1/1/2016'));
  dates.add(new selectoption('1/2/2016'));
  dates.add(new selectoption('1/3/2016'));
  return dates;
}

Visualforce to consume dates

<apex:selectList size="1" id="type">
  <apex:selectOptions value="{!dates}" />
</apex:selectList>

The SLDS examples only show hard-coding

<div class="slds-dropdown slds-dropdown--left">
    <ul class="dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item">
        <a href="javascript:void(0);" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option A</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="javascript:void(0);" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option B</p>
        </a>
      </li>

How can I iterate through to create these dynamic options?

Answer 1

If you want the select option to look like SLDS picklist then just use the css class on SelectOption component. Like this:

<div class="slds-form-element">
    <label class="slds-form-element__label">Countries</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:selectList size="1" value="{!selectedCountry}" styleClass="slds-select">
                <apex:selectOptions value="{!countrieLst}" />
            </apex:selectList>
        </div>
    </div>
</div>

Class:

public List<SelectOption> countrieLst {get;set;}
countrieLst = new List<SelectOption>();
countrieLst.add(new SelectOption('','--None--'));
countrieLst.add(new SelectOption('India','India'));
countrieLst.add(new SelectOption('China','China'));
countrieLst.add(new SelectOption('US','US'));

Adding Images:

This is when applied to inputField:

<div class="slds-form-element">
    <label class="slds-form-element__label">Account Type</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:inputField value="{!account.Type}" styleClass="slds-select slds-input slds-input--small" />
        </div>
    </div>
</div>

This is when applied to SelectionOption. Same code given above.