var collegeData = [
    {
    'Ohio':
        [
            {name: 'Colllege of Wooster', value: 'cow'},
            {name: 'Ohio State University', value: 'osu'}
        ],
    'Arizona': [
            {name: 'Arizona State University', value: 'asu'}
        ]
    }
];

<select class="single-select" id="college" name="college">
  <option value="default"></option>
    <% for(var i = 0; i < college.length; i++) {%>
      <optgroup label="<%=college[i] %>">
        <% for(var j = 0; j < college[i][j].length; j++) {%>
         <option value="<%=college[i][j].value %>">
         <%=college[i][j].name %></option>
      <%}%>
    </optgroup>
  <%}%>
</select>

<select class="single-select" id="college" name="college">
  <option value="default"></option>
      <optgroup label="Ohio">
         <option value="cow"> College of Wooster</option>
         <option value="osu"> Ohio State University</option>
      </optgroup>
      <optgroup label="Arizona">
         <option value="asu"> Arizona State University</option>
      </optgroup>
</select>