JSFiddle - React, Tailwind, and code Playground

by no1_melman

HTML

<table>
    <tr>
        <td style="width:120px">Applications</td>
        <td></td>
        <td style="width:120px">Devices</td>
    </tr>
    <tr>
        <td>
            <div>
                <select id="AppSelectBox" size="4" style="width:100%;height:200px"></select>
            </div>
        </td>
        <td></td>
        <td>
            <div>
                <select id="DeviceSelectBox" size="4" style="width:100%;height:200px"></select>
            </div>
        </td>
    </tr>
</table>
<input type="hidden" id="hidden1" />
<input type="hidden" id="hidden2" />
<p id="selectedValues"></p>

CSS

div {
    display: inline;
    height: 200px;
}
body {
    font:0.9em Verdana;
}
td, tr {
    padding:0px 5px 0px 5px;
}

JavaScript

$(function () {
    var app1 = CreateGuid();
    var app2 = CreateGuid();
    var app3 = CreateGuid();
    
    var applications = [{
        name: "Angry Birds",
        val: app1
    }, {
        name: "InspiARTion",
        val: app2
    }, {
        name: "Magix Music Maker",
        val: app3
    }];

    var devices = [{
        name: "FFRD",
        app: app1,
        val: CreateGuid()
    }, {
        name: "Yoga 11",
        app: app1,
        val: CreateGuid()
    }, {
        name: "FFRD",
        app: app2,
        val: CreateGuid()
    }, {
        name: "FFRD",
        app: app3,
        val: CreateGuid()
    }, {
        name: "Yoga 11",
        app: app3,
        val: CreateGuid()
    }];

    function populateApplications() {
        for (var i = 0; i < applications.length; i++) {
            $('#AppSelectBox').append('<option value="' + applications[i].val + '">' + applications[i].name + '</option>');
        }
        $('#AppSelectBox option:first-child').attr("selected", "selected");
        $('#AppSelectBox').trigger('change');
    }

    $('#AppSelectBox').change(function () {
        var chosenApp = $('#AppSelectBox option:selected').val();

        $('#DeviceSelectBox').empty();

        for (var i = 0; i < devices.length; i++) {
            if (devices[i].app == chosenApp) {
                $('#DeviceSelectBox').append('<option value="' + devices[i].val + '">' + devices[i].name + '</option>');
            }
        }

        $('#hidden1').val($('#AppSelectBox option:selected').val());
        $('#DeviceSelectBox option:first-child').attr("selected", "selected");
        $('#hidden2').val($('#DeviceSelectBox option:selected').val());
    });

    $('#DeviceSelectBox').change(function(){
        $('#hidden2').val($('#DeviceSelectBox option:selected').val());
    });

    function FillHiddenInput2() {
        var innHTML = "";

        for (var i = 0; i < items.length; i++) {
            if (items[i].display == false) {
               ...