can/demos/can-stache-converters/multi-values.html

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

<style type="text/css">
select[multiple] {
	font-size: 15px;
	background: dimgrey;
	padding: 0.3em;
}
[value=red] {
	color: red;
}
[value=orange] {
	color: orange;
}
[value=yellow] {
	color: yellow;
}
[value=green] {
	color: green;
}
[value=blue] {
	color: blue;
}
[value=indigo] {
	color: indigo;
}
[value=violet] {
	color: violet;
}
</style>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle id="demo-source" main="@empty">
import { StacheElement, stacheConverters } from "can";

class MyDemo extends StacheElement {
	static view = `
		<select multiple values:bind="this.colors" size="7">
			<option value="red">Red</option>
			<option value="orange">Orange</option>
			<option value="yellow">Yellow</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
			<option value="indigo">Indigo</option>
			<option value="violet">Violet</option>
		</select>

		<ul>
			{{# for(color of colors) }}
				<li>{{ color }}</li>
			{{/ for }}
		</ul>	
	`;
	static props = {
		colors: {
			get default() {
				return ["green"];
			} 
		}
	};
}
customElements.define('my-demo', MyDemo);
</script>