AngularJS Example:

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="QuarterController">
    <select name="quarter" ng-model="Quarter.id" ng-options="q.id as q.val for q in Quarters">
        <option ng-selected="Quarter.val===q.val"></option>
    </select>
      <input type="button" name="Submit" value="Submit" ng-click="submit()"/>
      <br/>
      <p>{{answer}}</p>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

JavaScript

function QuarterController($scope) {
    $scope.Quarters = [{val: 'Q1', id: 1}, {val: 'Q2', id:2}, {val:'Q3', id:3}, {val:'Q4', id:4}];
    $scope.Quarter = {val: 'Q2', id: 2, extraField: 'Hello'};
    
    $scope.submit = function() {
        $scope.answer = "Val: " + $scope.Quarter.val + ", Id: " + $scope.Quarter.id + ", " + $scope.Quarter.extraField;
    };
}