Price Check

Basic Price Checker

by pphheerroonn

HTML

<script>
var array = [
    {Colour: "Blue", Size: "Small", Price: 45},
    {Colour: "Blue", Size: "Medium", Price: 48},
    {Colour: "Blue", Size: "Large", Price: 98},
    {Colour: "Red", Size: "Small", Price: 65},
    {Colour: "Red", Size: "Large", Price: 31}
];

var tables = {
    Colour: ["Blue", "Red"],
    Size: ["Small", "Large"],
    Condition: ["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 + ".";
}



</script><body onload="init()">
<form>
    <label><span>Colour</span> <select name="Colour" onchange="updateSpan()"></select></label>
    <label><span>Size</span> <select name="Size" onchange="updateSpan()"></select></label>
   ...

CSS

label {
    display: table-row;
}

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