can/view/bindings/doc/bindings-select-selected-index.html

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

<div id="demo">
<div id='out'></div>
<script type='text/stache' id="attending-template">
<p>Attending? 
  <select {($value)}='attending'>
  	  <option></option>
	  <option value='yes'>Yes</option>
	  <option value='no'>No</option>
	  <option value='maybe'>Maybe</option>
  </select>
</p>
<p>You {{attendence}}.</p>
</script>
</div>
<script>
	DEMO_HTML = document.getElementById("demo").innerHTML;
</script>
<script src="../../../node_modules/steal/steal.js" main="@empty"></script>
<script>
steal("can/view/bindings", "can/view/stache", "can/map/define",function(){
	
Person = can.Map.extend({
	define: {
		attending: {
			set: function(newVal){
				if(newVal === "") {
					this.removeAttr("attending");
					return undefined;
				} else {
					return newVal;
				}
			}
		}
	}
});
	
person = new Person({
//  attending: "no"
});

var frag = can.view(
	"attending-template",
	person,
	{
      attendence: function(){
      	var keys = can.Map.keys( person );
      	
        return keys.indexOf("attending") >= 0 ? 
          "are a " + person.attr("attending") :
          "have not responded";
    
    }
});

$("#out").html( frag );

});
</script>