title: Observable Binding With Knockout.JS
body: <p>When I run this html page and click on some option from select element the value of price automatically changes. How it is possible ? Can you explain the function and what role value of select <code>elementvalue: meal,</code> play here ?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Working with Lists and Collections&lt;/title&gt;
  
      &lt;script type="text/javascript" src="knockout-3.1.0.debug.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function SeatReservation(name, initialMeal) {
              var self = this;
              self.name = name;
              self.meal = ko.observable(initialMeal);
          }
  
          // Overall viewmodel for this screen, along with initial state
          function ReservationsViewModel() {
              var self = this;
  
              // Non-editable catalog data - would come from the server
              self.availableMeals = [
                  { mealName: "Standard (sandwich)", price: 0 },
                  { mealName: "Premium (lobster)", price: 34.95 },
                  { mealName: "Ultimate (whole zebra)", price: 290 }
              ];
  
              // Editable data
              self.seats = ko.observableArray([
                  new SeatReservation("Steve", self.availableMeals[0]),
                  new SeatReservation("Bert", self.availableMeals[0])
              ]);
  
              // Operations
              self.addSeat = function () {
                  self.seats.push(new SeatReservation("", self.availableMeals[0]));
              }
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;h2&gt;Your seat reservations&lt;/h2&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Passenger name&lt;/th&gt;
                      &lt;th&gt;Meal&lt;/th&gt;
                      &lt;th&gt;Surcharge&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody data-bind="foreach: seats"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input data-bind="value: name" /&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"&gt;&lt;/select&gt;&lt;/td&gt;
                      &lt;td data-bind="text: meal().price"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button data-bind="click: addSeat"&gt;Reserve another seat&lt;/button&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          ko.applyBindings(new ReservationsViewModel());
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>