Search code examples
javascripthtmloracle-jet

Fail to bind the options data in JS

I want to display a select-only-one combo box using html+js.

What I want to show is like this:

enter image description here

But now I just get a blank drop down list like this：

enter image description here

The HTML code:

<div style="width:200px;height:100%;float:left;padding-left: 0px">
    <oj-combobox-one id="en" aria-label="en Select" options="{{ens}}" value="{{selectedEn}}"render-mode="native" style="max-width:20em" >   
  </oj-combobox-one>
</div>

The JS code:

self.ens = ko.observableArray([]);
self.selectedEn = ko.observable("a"); //Default to show
var en = ["a","b","c"];
self.ens(en);

Could you please help to find out where the issue is? Thanks in advance.

Solution

  • Check out this page of the documentation. Each option requires the actual value (which is used by the JS file), as well as the label (which is what the user will see on the screen).

    So you need to change your variable en to:

    var en = [{value: 'a', label: 'a'},
          {value: 'b', label: 'b'},
          {value: 'c', label: 'c'}];