Ember.js Bootstrap 3 Select Box. Creates a dynamically populated drop down list, that is styled using Bootstrap 3.

select-box.css

.app-selectbox.full-width {
  display: block;
  width: 100%;
}
.app-selectbox span.caret {
  float: right; 
  margin-top: 8px;
  margin-left: 12px;
}
.app-selectbox button {
  display: block;
  width: 100%;
  text-align: left
}
.app-selectbox ul {
  top: 30px; 
}
.app-selectbox.full-width ul {
  width: 100%;
}

select-box.hbs

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> {{label}}</button>
<ul class="dropdown-menu">
  {{#each options}} <li><a {{action "selectOption" this}} class="btn-link">{{label}}</a></li> {{/each}}
</ul>

SelectBoxComponent.js

App.SelectBoxComponent = Ember.Component.extend({
	// Container is <div class="btn-group app-selectbox">
	classNames: ["btn-group", "app-selectbox"],
	tagName: "div",

	// Set attribute "fullWidth=true" to expand 100%
	fullWidth: false,
	classNameBindings: ["fullWidth"],
	
	// Source data (the same as Ember.Select)
	content: [],
	optionsValuePath: "id",
	optionsLabelPath: "name",
	
	/* Default prompt, set attribute "prompt='Select something'" to change */
	prompt: "Select ...",

	/* The selected value */
	label: null,
	value: null,
	
	/* Selecting a value will set the label */
	valueChanged: function(){
		var value = this.get("value");
		if(value!==null)
		{
			var content = this.get("content");
			var valuePath = this.get("optionsValuePath");
			var labelPath = this.get("optionsLabelPath");

			// Find the corresponding label for the given value
			for(var c = 0; c < content.length; c++){
				if(content[c][valuePath]==value){
					// Value was matched, set the label
					this.set("label", content[c][labelPath]);
					return;
				}
			}
		}
		// Default to the prompt
		this.set("label", this.get("prompt"));

	}.observes("value").on("init"),
	
	/* Provides the computed [{label: "", value: ""}, ...] for the drop-down */
	options: function(){

		var content = this.get("content");
		var valuePath = this.get("optionsValuePath");
		var labelPath = this.get("optionsLabelPath");

		if(!$.isArray(content))
			this.set("content", []);

		var o = [];
		for(var c = 0; c < content.length; c++)
			o.push( { label: content[c][labelPath], value: content[c][valuePath] });

		return o;
	}.property("content", "optionsValuePath", "optionsLabelPath"),

	/* Sets the selected value when clicked */
	actions: {
		selectOption: function(value){
			this.set("value", value);
		}
	}
});

Usage.md

#Usage:

{{select-box value=customerId content=customers optionValuePath="id" optionLabelPath="name" prompt="Select a customer" fullWidth=true}}

Attribute	Description	Required	Example
value	The value in your model or controller to bind to. It is the selected value of the dropdown list.	Yes	value=customerId
content	The property name within your model or controller that provides an array of source data that will be used to populate the list	Yes	content=customers
optionValuePath	The key from the option to read the value from. Default "id"	No	optionValuePath='id'
optionLabelPath	The key from the option to read the label from. Default "name"	No	optionLabelPath='name'
prompt	Sets the text to display when there is no selected value. Default "Select ..."	No	prompt='Select a customer'
fullWidth	When set to true the component will stretch to 100% of the width of it's container	No	fullWidth='true'