$(function() {
var compiled = _.template($("#templ").html());
$("#select2Me").html(compiled({
prodSet1: [
'prod1',
'prod2',
'prod3'],
prodSet2: [
'planprod1',
'planprod2',
'planprod3']
}));
$("#select2Me").select2({
minimumInputLength: 3,
placeholder: 'Search'
});
});
<select id="select2Me" style="width:300px" data-init-text='Search'></select>
<script type="text/template" id="templ">
<select>
<optgroup label="Product Set 1">
<% _.each(prodSet1, function(product) { %>
<option><%= product %></option>
<% }); %>
</optgroup>
<optgroup label="Product Set 2">
<% _.each(prodSet2, function(product) { %>
<option><%= product %></option>
<% }); %>
</optgroup>
</select>
</script>
External resources loaded into this fiddle: