can/demos/forms/elements-select-string-to-any.html

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

<string-to-any-selector></string-to-any-selector>

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

class StringToAnySelector extends StacheElement {
    static view = `
        <label>
            What primitive would you like?
            <select value:bind="string-to-any(this.primitiveValue)">
              <option value="2">Number</option>
              <option value="null">Null</option>
              <option value="foo">String</option>
              <option value="true">Boolean</option>
              <option value="NaN">NaN</option>
              <option value="Infinity">Infinity</option>
            </select>
        </label>

        <p>Selected primitive: {{ this.primitiveValueType }}</p>
    `;

    static props = {
        primitiveValue: {
            default: true,
            type: type.Any
         },
        get primitiveValueType() {
            return typeof this.primitiveValue;
        },
    };
};
customElements.define("string-to-any-selector", StringToAnySelector);
</script>