Mithril select/option

by Yoshiki Shibukawa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<div id="root"/>

JavaScript

const items = [
    "(好きな武将を選んでください)",
    "織田信長",
    "明智光秀",
    "毛利元就",
    "上杉謙信"
];

const SelectName = {
    /* ここは、controller() {}という書き方ではダメ
     * ES6のこの形式で作った関数はコンストラクタとして使えない
     */
    controller: function () {
        this.selected = m.prop(0);
    },
    
    view(ctrl) {
        return m('div', [
            m('div', ctrl.selected() < 1 ? "未選択" : `${items[ctrl.selected()]}が選択されました`),
            m('select', {
            		onchange:  m.withAttr('selectedIndex', ctrl.selected)
            }, items.map((item, index) => {
                return m('option', {selected: ctrl.selected() === index}, item);
            }))
        ]);
    }
};

function main() {
    const root = document.querySelector("#root");
    m.mount(root, SelectName);
}


if (document.readyState !== 'loading') {
    main();
} else {
    document.addEventListener('DOMContentLoaded', main);
}