Skip to Main Content

Passing Data from HTML code to Javascript

I create radiobutton Set and dropdown list using oracle JET. I want to make dynamic in the sense when I select value from radiobutton then dropdown list should be appear. Can you help me to make this. I share my code.
HTML code:
<div id="containerDiv1">
<oj-label for="radioset1">Select Operating System</oj-label>
<oj-radioset
id="radioset1"
options="{{OperatingSystemDP}}"
value="{{select_OS}}"
>
</oj-radioset>
<br />
<oj-label for="selectedOSVal">Current selected value is</oj-label>
<span id="selectedOSVal">
<oj-bind-text value="[[select_OS]]"></oj-bind-text>
</span>
</div>
<br />
<br />
<div id="containerDiv2">
<oj-label for="select1">Select OS version</oj-label>
<oj-select-single
id="select1"
label-hint=""
style="max-width: 20em"
data="[[OSVersionDP]]"
value="{{select_OS_Version}}"
>
</oj-select-single>
<br />
<br />
<div>
<oj-label for="selectedval">Current selected value is</oj-label>
<span id="selectedval">
<oj-bind-text value="[[select_OS_Version]]"></oj-bind-text>
</span>
</div>
</div>

Javascript Code:
require([
"knockout",
"ojs/ojbootstrap",
"ojs/ojarraydataprovider",
"ojs/ojknockout",
"ojs/ojradioset",
"ojs/ojbutton",
"ojs/ojselectsingle",
"ojs/ojlistdataproviderview",
], function (ko, Bootstrap, ArrayDataProvider,ListDataProviderView, OS) {
var curr_OS;
function ViewModel1() {
this.select_OS = ko.observable("");
this.OperatingSystem = [
{ value: "Linux", label: "Linux" },
{ value: "Windows", label: "Windows" },
];
this.OperatingSystemDP = ko.observable(
new ArrayDataProvider(this.OperatingSystem, { keyAttributes: "value" })
);
}
var radioButton = document.getElementById("containerDiv1");
curr_OS = radioButton.options[radioButton.selectedIndex].value;
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(
new ViewModel1(),
document.getElementById("containerDiv1"),
);
}
);

  function SelectModel1() {  
    this.select\_OS\_Version = ko.observable("");  
    var browsers = \[  
      { value: "Windows Server 2012", label: "Windows Server 2012" },  
      { value: "Windows Server 2016", label: "Windows Server 2016" },  
      { value: "Windows Server 2019", label: "Windows Server 2019" },  
    \];  
    this.OSVersionDP = new ArrayDataProvider(browsers, {  
      keyAttributes: "value",  
    });  
  }  
  Bootstrap.whenDocumentReady().then(function () {  
    ko.applyBindings(  
      new SelectModel1(),  
      document.getElementById("containerDiv2")  
    );  
  });
This post has been answered by John JB Brock-Oracle on Dec 9 2020
Jump to Answer
Comments
Post Details
Added on Dec 7 2020
1 comment
23 views