Edit in JSFiddle

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojinputtext',
  'ojs/ojselectcombobox'
], function(ko, oj, $) {
  'use strict';
  
  ko.bindingHandlers.inaccessibleOjSelect = {
    init: function(element, valueAccessor, allBindingsAccessor, ctx) {
      var options = allBindingsAccessor().ojSelectOptions || {};
      var multiple = !!options.multiple;
      var tabEl = $(element)
        // initialize ojSelect
        .ojSelect(options)
        // bind value change handler
        .on({
            'ojoptionchange': function (event, data) {
            	if (data.option === "value") {
                var observable = valueAccessor();
                if (ko.isObservable(observable)) {
                  if (multiple) {
                    observable(data.value);
                  } else {
                    // unwrap from array if single select
                    observable(data.value[0]);
                  }
                } // if not observable, just throw away the value
              }
            }
          })
        // get reference to item with tabIndex
        .ojSelect( "getNodeBySubId", {'subId': 'oj-select-chosen'})
        .closest(".oj-select-choice");

      $(tabEl).attr("tabIndex", -1);

    },
    update: function(element, valueAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());
      $(element).ojSelect("option", "value", [value]);
    }
  };


  var ViewModel = function() {
    var self = this;

    self.browser = ko.observable(['CH']);
    
    self.browserChangedHandler = function (event, data) {
      if (data.option == "value") {
        console.log(data);
      }
    };
  };

  ko.applyBindings(new ViewModel());
});


//RequireJS configs (usually these come first in main.js, but they don't have to)
requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
    "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
    "jqueryui-amd": "//rawgit.com/jquery/jquery-ui/1-11-stable/ui",

    "promise": "//cdn.lukej.me/es6-promise/1.0.0/promise.min",
    "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
    "ojdnd": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
    "ojs": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/debug",
    "ojL10n": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/ojL10n",
    "ojtranslations": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/resources",
    "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
    "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min",

  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jqueryui-amd': {
      exports: "$",
      deps: ['jquery']
    },
    'jquery': {
      exports: ['jQuery', '$']
    }
  },
  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
        // The following addes en-US to the r.js bundle
        //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
      }
    }
  }
});

<!-- this content will be overlayed by the toast notification -->
<div class="oj-panel oj-margin">
  <p>
    <label for="text-input">ojInputText 1</label>
    <input id="text-input" 
           type="text"
           data-bind="ojComponent: {component: 'ojInputText'}"/>
  </p>
  <p>
    <label for="basicSelect">Select a browser</label>
    <select id="basicSelect" data-bind="inaccessibleOjSelect: browser,
                          ojSelectOptions: {optionChange: browserChangedHandler,
                               rootAttributes: {style:'max-width:20em'}}">
      <option value="IE">Internet Explorer</option>
      <option value="FF">Firefox</option>
      <option value="CH">Chrome</option>
      <option value="OP">Opera</option>
      <option value="SA">Safari</option>
    </select>
  </p>
  <p>
    <label for="text-input2">ojInputText 2</label>
    <input id="text-input2" 
           type="text"
           data-bind="ojComponent: {component: 'ojInputText'}"/>
  </p>
</div>

@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css');

#toast .flex-container {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

#toast {
  border: 1px solid #0572ce;
  box-shadow: 0 1px 3px #777;
  margin: 4px auto 0;
  width: 90%;
  /* following z-index required to overlay oj form controls */
  z-index: 1;
}