can/demos/forms/elements-select-multiple.html

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

<pizza-toppings-picker></pizza-toppings-picker>

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

class PizzaToppingsPicker extends StacheElement {
    static view = `
        <label>
            What pizza toppings do you like?
            <select values:bind="this.toppings" multiple>
                <option>Pepperoni</option>
                <option>Mushrooms</option>
                <option>Onions</option>
                <option>Sausage</option>
                <option>Bacon</option>
                <option>Extra cheese</option>
                <option>Black olives</option>
                <option>Green peppers</option>
                <option>Pineapple</option>
                <option>Spinach</option>
            </select>
        </label>

        <p>
            Selected toppings:
            {{# for( topping of this.toppings) }}
                {{ topping }}
            {{/ for }}
        </p>
    `;

    static props = {
        toppings: type.maybeConvert(ObservableArray)
    };
};
customElements.define("pizza-toppings-picker", PizzaToppingsPicker);
</script>