can/demos/forms/elements-select.html

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

<month-picker></month-picker>

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

class MonthPicker extends StacheElement {
    static view = `
        <label>
            What month were you born?
            <select value:bind="this.selectedMonth">
                <option value="Jan">Jan</option>
                <option value="Feb">Feb</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="Aug">Aug</option>
                <option value="Sept">Sept</option>
                <option value="Oct">Oct</option>
                <option value="Nov">Nov</option>
                <option value="Dec">Dec</option>
            </select>
        </label>

        <p>Selected month: {{ this.selectedMonth }}</p>
    `;

    static props = {
        selectedMonth: "June"
    };
};
customElements.define("month-picker", MonthPicker);
</script>