Untitled

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <select data-bind="selectedOptions: options">
      <option value="option 1" selected>Option 1</option>
      <option value="option 2">Option 2</option>
      <option value="option 3">Option 3</option>
    </select>
    
    
    <div data-bind="visible: shouldShowText">
      <h2>some hidden text</h2>
    </div>
    
    <hr />

    <div data-bind="text: ko.toJSON(viewModel)"></div>
    
    <script data-require="knockout@3.2.0" data-semver="3.2.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <script>
      function ViewModel() {
        var availableOptions = document.querySelectorAll('option');
        availableOptions = Array.prototype.map.call(availableOptions, function(o) { return o.value; })
        
        var firstOption = availableOptions[0];
        
        this.options = ko.observableArray([firstOption]);
        this.shouldShowText = ko.computed(function() {
          var selectedOption = this.options()[0];
          return availableOptions.indexOf(selectedOption) === 2;
        }, this);
      }
      
      var viewModel = new ViewModel();
      
      ko.applyBindings(viewModel);
    </script>
  </body>

</html>

function ViewModel() {
  var availableOptions = document.querySelectorAll('option');
  availableOptions = Array.prototype.map.call(availableOptions, function(o) { return o.value; })
  
  var firstOption = availableOptions[0];
  
  this.options = ko.observableArray([firstOption]);
  this.shouldShowText = ko.computed(function() {
    var selectedOption = this.options()[0];
    return availableOptions.indexOf(selectedOption) === 2;
  }, this);
}

var viewModel = new ViewModel();

ko.applyBindings(viewModel);