Here is how I handle it. Not sure about opt-groups.
HTML
<select id="myselect" name="myselect">
<option value="" data-url=""></option>
<option value="City 1" data-url="/alabama/city-1">City 1</option>
<option value="City 2" data-url="/alabama/city-2">City 2</option>
</select>
JAVASCRIPT
$("#myselect").select2({
width: '100%',
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
$(data.element).attr('data-url', data.dataset.url);
return data.text;
}
});
var url = $("#myselect").find(':selected').data('url');