Very basic reactive select for meteor

example-usage.js

{{> select selectData}}

Template.foo.selectData = {
    include_blank: true
    icon: 'player'
    name: 'players_required',
    options: ({text: "#{i} players", value: i, selected: i == required} for i in [3..18])
 }

select.coffee

Template.select.selected_text = ->
  unless @selected_text?
    selected_option = _.find(@options, (o) -> o.selected)
    text = selected_option.text if selected_option
    
    Meteor.deps.add_reactive_variable(this, 'selected_text', text) 
  
  @selected_text()
  
Template.select.events = 
  'change select': (event) ->
    @selected_text.set($(event.target).find('option:selected').text())

select.handlebars

<template name="select">
  <div class="select">
    <select name="{{name}}">
      {{#if include_blank}}<option></option>{{/if}}
      {{#each options}}
        <option {{#if selected}}selected{{/if}} value="{{value}}">{{text}}</option>
      {{/each}}
    </select>
    <a class="btn secondary">
      {{#if icon}}
        <span class="icon16 {{icon}}"></span> 
      {{/if}}
      <span class="selected_text">{{selected_text}} </span>
      <span class="icon12 arrows"></span>
    </a>
  </div>
</template>