title: How to bind list of items with in dropdownlist using knockout.js
body: <p>I am working on knockout.js. I am very new to knockout.js so iam following knockout.js tutorials. I am trying to display list of items with in dropdownlist basically it is actual example provided in knockout.js tutorials. I have written following code,</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              function setreservation(name, initmeal) {
                  var self = this;
                  self.Name = name;
                  self.Meal = ko.observable(initmeal);
  
                  self.FormatPrice = ko.computed(function () {
                      return self.Meal().Price ? "$" + self.Meal().Price.toFixed(2) : "none";
                  });
              }
  
              function ReservationViewModel() {
                  var self = this;
                  self.availablemeals = [{ "MealName": "standard", "Price": 10 }, { "MealName": "premium", "Price": 20 }, { "MealName": "Platinum", "Price": 30}];
                  self.seats = ko.observableArray([new setreservation("karthik", self.availablemeals[0]), new setreservation("Tirumalesh", self.availablemeals[1])]);
                  self.ReserveNewSeat = function () {
                      self.seats.push(new setreservation("karhik", self.availablemeals[2]));
                  };
              }
  
              ko.applyBindings(new ReservationViewModel());
          }); 
  </code></pre>
  
  <p>and my view is like,</p>
  
  <pre><code>&lt;table cellpadding="3" cellspacing="4"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Meal&lt;/th&gt;&lt;th&gt;Price&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:FormatPrice"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button data-bind="click:ReserveNewSeat"&gt;Reserve New One&lt;/button&gt;
  </code></pre>
  
  <p>so please guide me does my code makes any thing wrong.</p>