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")
);
});