Discussions
Categories
- 196.7K All Categories
- 2.2K Data
- 234 Big Data Appliance
- 1.9K Data Science
- 449.8K Databases
- 221.5K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 549 MySQL Community Space
- 477 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 532 SQLcl
- 4K SQL Developer Data Modeler
- 186.8K SQL & PL/SQL
- 21.2K SQL Developer
- 295.3K Development
- 17 Developer Projects
- 138 Programming Languages
- 292K Development Tools
- 104 DevOps
- 3.1K QA/Testing
- 645.9K Java
- 27 Java Learning Subscription
- 37K Database Connectivity
- 153 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 157 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 203 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 389 LiveLabs
- 37 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.6K Other Languages
- 2.3K Chinese
- 170 Deutsche Oracle Community
- 1K Español
- 1.9K Japanese
- 230 Portuguese
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")
);
});
Best Answer
-
I believe I answered this Q over in the Community Slack channel. It was answered with this jsFiddle example.
Answers
-
I believe I answered this Q over in the Community Slack channel. It was answered with this jsFiddle example.