can/demos/forms/elements-select-selected-to-index.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<month-index-picker></month-index-picker>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { stacheConverters, StacheElement, type } from "can";

class MonthIndexPicker extends StacheElement {
    static view = `
        <label>
            What month were you born?
            <select value:bind="this.selectedIndex">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
            </select>
        </label>

        <p>Selected index: {{ this.selectedIndex }}</p>

        <label>
            Selected Month:
            <input value:bind="selected-to-index(this.selectedIndex, this.months)">
        </label>
    `;

    static props = {
        selectedIndex: type.maybeConvert(Number),

        months: {
            get default() {
                return [
                    "Jan",
                    "Feb",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "Aug",
                    "Sept",
                    "Oct",
                    "Nov",
                    "Dec"
                ];
            }
        }
    };
};
customElements.define("month-index-picker", MonthIndexPicker);
</script>