Mithril Select Test

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.js"></script>
<div id="app">
Loading...
</div>

JavaScript

const select = {
  view: function(ctrl, args) {
    return (
      m('select', {
        'onchange': m.withAttr('value', args.prop),
        'value': args.prop(),
        'config': (elem, inited, context, velem) => {
          // elem.value = args.prop() // Workaround: Mithril 0.2.5 does not seem to set the value
          console.log(`Select value: ${elem.value} Prop value: ${args.prop()}`)
        }
        },
        args.options.map(option => m('option', {'key': option.value, 'value': option.value}, option.name))
      )
    )
  }
}

const options = [
  [
    {name: 'Zero', value: '0'},
    {name: 'Two', value: '2'},
    {name: 'One', value: '1'},
  ],
  [
    {name: 'One', value: '1'},
    {name: 'Two', value: '2'},
    {name: 'Three', value: '3'},
  ]
]

let appModel = {
  id: 0,
  values: [
    m.prop('0'),
    m.prop('2')
  ]
}

const app = {
  view() {
    return (
      m('div',
        m('p', 'Please observe the developer console.'),
        m('button', { 'onclick': () => appModel.id = +!appModel.id },
          'Click me at least twice' 
        ),
        m('br'),
        m(select, {
          'prop': appModel.values[appModel.id],
          'options': options[appModel.id]
        })
      )
    )
  }
}

m.mount(document.getElementById('app'), m(app))