     mario: Batman(selected: null)
     crono: Batman(selected: null)
 
-  helpers.render '<select data-bind="something"><option value="mario" data-bind-selected="mario.selected"></option><option value="crono" data-bind-selected="crono.selected"></option></select>', context, (node) ->
+  helpers.render '<select data-bind="something"><option value="mario" data-bind-selected="mario.selected">Mario</option><option value="crono" data-bind-selected="crono.selected">Crono</option></select>', context, (node) ->
     equal node[0].value, 'crono'
     equal context.get('crono.selected'), true
     equal context.get('mario.selected'), false
+    deepEqual getContents(node), ['Mario', 'Crono']
 
     node[0].value = 'mario'
     helpers.triggerChange node[0]
     equal context.get('mario.selected'), true
     equal context.get('crono.selected'), false
+    deepEqual getContents(node), ['Mario', 'Crono']
+
     QUnit.start()
 
 asyncTest 'it binds the value of a multi-select box and updates the options when the bound value changes', ->
   context = new Batman.Object
     heros: new Batman.Set('mario', 'crono', 'link', 'kirby')
     selected: new Batman.Object(name: ['crono', 'link'])
-  helpers.render '<select multiple="multiple" size="2" data-bind="selected.name"><option data-foreach-hero="heros" data-bind-value="hero"></option></select>', context, (node) ->
-    selections = (c.selected for c in node[0].children when c.nodeType is window.Node.ELEMENT_NODE)
-    deepEqual selections, [no, yes, yes, no]
+  helpers.render '<select multiple="multiple" size="2" data-bind="selected.name"><option data-foreach-hero="heros" data-bind-value="hero" data-bind="hero | capitalize"></option></select>', context, (node) ->
+    deepEqual getSelections(node), [no, yes, yes, no]
+    deepEqual getContents(node), ['Mario', 'Crono', 'Link', 'Kirby']
+
     context.set 'selected.name', ['mario', 'kirby']
-    selections = (c.selected for c in node[0].children when c.nodeType is window.Node.ELEMENT_NODE)
-    deepEqual selections, [yes, no, no, yes]
+
+    deepEqual getSelections(node), [yes, no, no, yes]
+    deepEqual getContents(node), ['Mario', 'Crono', 'Link', 'Kirby']
     QUnit.start()
 
 asyncTest 'it binds the value of a multi-select box and updates the options when the options changes', ->

helpers = if typeof require is 'undefined' then window.viewHelpers else require './view_helper'

oldDeferEvery = Batman.DOM.IteratorBinding::deferEvery

QUnit.module 'Batman.View select bindings'
  setup: ->

    equal node[0].value, 'link'
    QUnit.start()

asyncTest 'it should bind the value of a select box and update when options change', 7, ->
  context = Batman
    heros: new Batman.Set()
    selected: new Batman.Object(name: 'crono')
  helpers.render '<select data-bind="selected.name"><option data-foreach-hero="heros" data-bind-value="hero" data-bind="hero | capitalize"></option></select>', context, (node) ->
    equal node[0].value, ''
    equal context.get('selected.name'), 'crono'
    context.get('heros').add('mario', 'link', 'crono')
    delay ->
      equal node[0].value, 'crono'
      deepEqual getContents(node), ['Mario', 'Link', 'Crono']
      equal context.get('selected.name'), 'crono'
      context.set('selected.name', 'mario')
      equal node[0].value, 'mario'
      deepEqual getContents(node), ['Mario', 'Link', 'Crono']

asyncTest 'it should bind the value of a select box and update the javascript land value with the selected option', 3, ->
  context = Batman
