JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<div id="calc">
        <div class="selector">
            <div class="prev"><</div>
            <select class="val" onload="changeOptions(0);" onChange="changeOptions(this.value);">
                <option selected value="0">Linux</option>
                <option value="1">Windows</option>
            </select>
            <div class="next">></div>
        </div>
        <div class="selector">
            <div class="prev"><</div>
            <select class="val" id="priceList">
                <option value="" disabled selected>Pricing List</option>
            </select>
            <div class="next">></div>
        </div>
    </div>

CSS

.prev, .next {
    width: 13px;
    height: 18px;
    padding: 2px 0 0 7px;
    background-color: #6c6c6c;
    display: inline-block;
    color: #fff;
}

JavaScript

var priceList = {
    0: ["5", "10", "20"],
    1: ["50", "70", "100"]
}

function changeOptions(value)
{
    var priceListOptions = "";
    for (var x in priceList[value]) {
        priceListOptions += "<option>" + priceList[value][x] + "</option>";
    }

    $("#priceList").html(priceListOptions);
}

$(".prev").click(function() {
    $(this).siblings('select').find('option:selected').prev().prop('selected', true);
});

$(".next").click(function() {
    $(this).siblings('select').find('option:selected').next().prop('selected', true);
});