Passing Data from HTML code to Javascript

Idris Patel-Oracle

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

        );

      });

John 'JB' Brock-Oracle

I believe I answered this Q over in the Community Slack channel. It was answered with this jsFiddle example.

Updating Select Component - JSFiddle - Code Playground

John 'JB' Brock-Oracle

I believe I answered this Q over in the Community Slack channel. It was answered with this jsFiddle example.

Updating Select Component - JSFiddle - Code Playground