JSFiddle - React, Tailwind, and code Playground

by mendelthecoder

HTML

<label for="from">From</label>
<select id="from" name="from">
    <option value="Select Country">Select Country</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
</select>

<label for="to">To</label>
<select id="to" name="to">
    <option value="Select Country">Select Country</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
</select>

<div class="uk-zones-from">
    <form>
        <div>
            <input type="radio" id="r1" name="ruk" />
            <label for="r1"><span class="uk1"></span>UK Zone One</label>
        </div>
        
        <div>
            <input type="radio" id="r2" name="ruk" />
            <label for="r2"><span class="uk2"></span>UK Zone Two</label>
        </div>
        
        <div>
            <input type="radio" id="r3" name="ruk" />
            <label for="r3"><span class="uk3"></span>UK Zone Three</label>
        </div>
        
        <div>
            <input type="radio" id="r4" name="ruk" />
            <label for="r4"><span class="uk4"></span>UK Zone Four</label>
        </div>
    </form>
</div>

<br />

<div class="uk-zones-to">
    <form>
        <div>
            <input type="radio" id="r1" name="ruk" />
            <label for="r1"><span class="uk1"></span>UK Zone One</label>
        </div>
        
        <div>
            <input type="radio" id="r2" name="ruk" />
            <label for="r2"><span class="uk2"></span>UK Zone Two</label>
        </div>
        
        <div>
            <input type="radio" id="r3" name="ruk" />
            <label for="r3"><span class="uk3"></span>UK Zone Three</label>
        </div>
        
        <div>
            <input type="radio" id="r4" name="ruk" />
            <label for="r4"><span class="uk4"></span>UK Zone Four</label>
        </div>
    </form>
</div>

<br />

<div...

CSS

.uk-zones-from { display: none; }
.de-zones-from { display: none; }
.fr-zones-from { display: none; }


.uk-zones-to { display: none; }
.de-zones-to { display: none; }
.fr-zones-to { display: none; }

JavaScript

var list = [
    {"France":[
        {"United Kingdom":[
         [20,36,42,60],
         [25,42,56,70],
         [35,50,52,68],
         [40,56,68,72]
        ]},
        {"Germany":[]}
    ]},
];

$("#from").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() == "United Kingdom") {
                    $(".uk-zones-from").show();
                }else{
                    $(".uk-zones-from").hide();
                }
                
                if ($(this).val() == "Germany") {
                    $(".de-zones-from").show();
                }else{
                    $(".de-zones-from").hide();
                } 
                
                if ($(this).val() == "France") {
                    $(".fr-zones-from").show();
                }else{
                    $(".fr-zones-from").hide();
                }
            });
            
            $("#to").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() == "United Kingdom") {
                    $(".uk-zones-to").show();
                }else{
                    $(".uk-zones-to").hide();
                } 
                
                if ($(this).val() == "Germany") {
                    $(".de-zones-to").show();
                }else{
                    $(".de-zones-to").hide();
                } 
                
                if ($(this).val() == "France") {
                    $(".fr-zones-to").show();
                }else{
                    $(".fr-zones-to").hide();
                } 
                
            });


function DisplayPrice(price){
			$("#totalSum").value = $
        }