JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<select class="foo">
<option value="codex">description 1</option>
<option value="codey">description 2</option>
<option value="cod">description 3</option>
<option value="code">description 4</option>
</select>
CSS
.selectBoxOptionCode {
width: 55px;
text-align: right;
margin-right: 10px;
display: inline-block;
}
JavaScript
$('.foo option').text(function(i,v){
return this.value + ' ' + v;
});
function selectBoxOptionFormat(state) {
var originalOption = state.element;
var txt = state.text.split(' ').slice(1).join(' ');
return "<span class='selectBoxOptionCode'>" + state.id + "</span><span>" + txt + "</span>";
}
$(".foo").select2({
width:"350px",
formatResult: selectBoxOptionFormat
});
http://busypeoples.github.io/post/thinking-in-components-angular-js/
https://gist.github.com/toddmotto/5b4de6c777d3e446e6410fdadb824522
https://github.com/petebacondarwin/ng1-component-demo/blob/master/app/app.js