title: Dynamic option groups for Select element based on alphabet
body: <p>I'm generating a select list dynamically from an array of data and I want to add option group based on alphabet.</p>
  
  <p>e.g. data</p>
  
  <pre><code>data = [
    ['bcde','21254'], ['abcd','1234'], ['abcde','23456'], ['bcdef','3232']
  ];
  </code></pre>
  
  <p><code>data.sort();</code> takes care of ordering based on alphabet and then I go through the data and on each I do something like: </p>
  
  <pre><code>&lt;option value="item[1]"&gt;item[0]&lt;/option&gt;
  </code></pre>
  
  <p>However what I want to do is, after getting the items sorted based on alphabet, check the first character of each item and create option group based on that, when character of next item is different create a new option group labelled with the new character</p>
  
  <p>so the output should look like:</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="A"&gt;
          &lt;option value="1234"&gt;abcd&lt;/option&gt;
          &lt;option value="23456"&gt;abcde&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="B"&gt;
          &lt;option value="21254"&gt;bcde&lt;/option&gt;
          &lt;option value="3232"&gt;bcdef&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Can anyone please advice what's the best way to do this, I'm using jquery by the way, cheers.</p>
  
  <p>Edit, this is my current code:</p>
  
  <pre><code>$.when( $.indexedDB("dbname").objectStore('employee').each(function(item){
    employeenames.push([item.value.name,item.value.id]);
  }).then(function(){
    employeenames.sort();
    $.each(employeenames, function(index, item){
     employeenames[index] = '&lt;option value="'+item[1]+'"&gt;'+item[0]+'&lt;/option&gt;';
    });           
   })
  ).done(function() {
    $("#employeenameBox select").html(employeenames);
  });
  </code></pre>