title: How to filter using a dropdown in Knockout
body: <p>I have just started using Knockout and I want to filter my data that I am displaying in my UI by selecting an item from a dropdown.  I have got so far, but I cannot get the selected value from my dropdown yet, and then after that I need to actually filter the data displayed based upon that value.  Here is my code so far :</p>
  
  <pre><code>    @model Models.Fixture
  
  @{
      ViewBag.Title = "Fixtures";
      Layout = "~/Areas/Development/Views/Shared/_Layout.cshtml";
  }
  @Scripts.Render("~/bundles/jqueryval")
  &lt;script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function FixturesViewModel() {
              var self = this;
              var baseUri = '@ViewBag.ApiUrl';
              self.fixtures = ko.observableArray();
              self.teams = ko.observableArray();
  
              self.update = function (fixture) {
  
                  $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture });
              };
  
              self.sortByAwayTeamScore = function () {
                  this.fixtures.sort(function(a, b) 
                  { return a.AwayTeamScore &lt; b.AwayTeamScore ? -1 : 1; });
              };
  
              self.select = function (team) {
  
              };
  
              $.getJSON("/api/fixture", self.fixtures);
              $.getJSON("/api/team", self.teams);
      }
  
      $(document).ready(function () {
          ko.applyBindings(new FixturesViewModel());
      }); 
  
    &lt;/script&gt;
  
  &lt;div class="content"&gt;
      &lt;div&gt;
          &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamId', click: $root.select"&gt; &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;table class="details ui-widget-content"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;&lt;td&gt;FixtureId&lt;/td&gt;&lt;td&gt;Season&lt;/td&gt;&lt;td&gt;Week&lt;/td&gt;&lt;td&gt;AwayTeam&lt;/td&gt;&lt;td&gt;&lt;a id="header" data-bind='click: sortByAwayTeamScore'&gt;AwayTeamScore&lt;/a&gt;&lt;/td&gt;&lt;td&gt;HomeTeam&lt;/td&gt;&lt;td&gt;HomeTeamScore&lt;/td&gt;&lt;/tr&gt;
              &lt;/thead&gt;    
              &lt;tbody data-bind="foreach: fixtures"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;span data-bind="text: $data.Id"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: $data.Season"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: $data.Week"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: $data.AwayTeamName"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" data-bind="value: $data.AwayTeamScore"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: $data.HomeTeamName"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" data-bind="value: $data.HomeTeamScore"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="button" value="Update" data-bind="click: $root.update"/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT : Figured this out :</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  function FixturesViewModel() {
          var self = this;
          var baseUri = '@ViewBag.ApiUrl';
          self.fixtures = ko.observableArray();
  
          self.teams = ko.observableArray();
          self.TeamName = ko.observable('');
  
          self.filteredItems = ko.computed(function () {
  
              var TeamName = self.TeamName();
                  if (!TeamName || TeamName == "None") {
  
                              return self.fixtures();
                          } else {
                              return ko.utils.arrayFilter(self.fixtures(), function (i) {
                                  return i.AwayTeamName == TeamName;
                              });
                  }
          });
  
          self.update = function (fixture) {
              $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture });
          };
  
          self.sortByAwayTeamScore = function () {
              this.fixtures.sort(function(a, b) 
              { return a.AwayTeamScore &lt; b.AwayTeamScore ? -1 : 1; });
          };
  
          $.getJSON("/api/fixture", self.fixtures);
          $.getJSON("/api/team", self.teams);
  }
  
  $(document).ready(function () {
      ko.applyBindings(new FixturesViewModel());
  }); 
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamName', value:TeamName"&gt; &lt;/select&gt;
  </code></pre>