JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<body onload="init()">
<form>
    <label><span>Colour</span> <select name="Colour" onchange="updateSpan()"><option>Blue</option><option>Red</option></select></label>
    <label><span>Size</span> <select name="Size" onchange="updateSpan()"><option>Small</option><option>Large</option></select></label>
    <span>Prize: </span> <span id="prize"></span>
</form>
</body>

CSS

label {
    display: table-row;
}

label span, input{
    display: table-cell;
}

JavaScript

var array = [{Colour: "Blue", Size: "Medium", Price: 48}, {Colour: "Blue", Size: "Large", Price: 82}];

var tables = {
    Colour: ["Blue", "Red"],
    Size: ["Small", "Large"]
};

var map = {};
var selects = {};
var span;

window.onLoad = function init() {
    alert(1);
    
    var form = document.forms[0];
    span = document.getElementById("prize");
    
    var select, len, i;
    
    for (var key in tables)
        if (tables.hasOwnProperty(key)) {
            select = form[key];
            selects[key] = select;
            
            var values = tables[key];
            len = values.length;
            for (i = 0; i < len; i++) {
                var option = document.createElement('option');
                option.appendChild(document.createTextNode(values[i]));
                select.appendChild(option);
            }
        }
    
    len = array.length;
    for (i = 0; i < len; i++) {
        var record = array[i];
        
        if (typeof map[record.Colour] === 'undefined')
            map[record.Colour] = {};
        
        map[record.Colour][record.Size] = record.Price;
    }
};

function updateSpan() {
    var Colour = selects.Colour.options[selects.Colour.selectedIndex].value;
    var Size = selects.Size.options[selects.Size.selectedIndex].value;
    
    if (typeof map[Colour] !== 'undefined' && typeof map[Colour][Size] !== 'undefined')
        span.textContent = map[Colour][Size];
    else
        span.textContent = "Prize not defined to Colour: " + Colour + " and Size: " + Size + ".";
}