select-choo-test.js

const choo = require('choo')
const html = require('choo/html')
const app = choo()

app.model({
  state: { selected: 'second' },
  reducers: {
    update: (data, state) => ({ selected: data })
  }
})

const mainView = (state, prev, send) => html`
  <main>
    <h1>Title: ${state.selected}</h1>
    <select onchange=${(e) => send('update', e.target.value)}>
      <option value="first" ${ state.selected === 'first' ? 'selected' : '' }>First</option>
      <option value="second" ${ state.selected === 'second' ? 'selected' : '' }>Second</option>
      <option value="third" ${ state.selected === 'third' ? 'selected' : '' }>Third</option>
    </select>
    <button onclick=${(e) => send('update', 'third')}>reset</button>
  </main>
`

app.router((route) => [
  route('/', mainView)
])

const tree = app.start()
document.body.appendChild(tree)