JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<form id="booking-form" action="#" method="post">
    <legend class="bold">Bookings</legend>
    <div class="input clearfix required">
        <label for="cinema">Cinema</label>
        <select name="cinema" id="cinema" data-relatedSelects="#day,#time">
            <option value></option>
            <option value="maxima" data-command="$('#time option[value=12]').hide()" data-exceptitems="{#time:'12,9',#day:'monday'}">Cinema Maxima</option>
            <option value="rivola">Cinema Rivola</option>
        </select>   
    <div class="error">
        <p>Please select a cinema</p>
    </div>  
    </div>
    <div class="input clearfix required">   
        <label for="day">Day</label> 
        <select name="day" id="day">
            <option value></option>
            <option value="monday">Monday</option>
            <option value="tuesday">Tuesday</option>
            <option value="wednesday">Wednesday</option>
            <option value="thursday">Thursday</option>
            <option value="friday">Friday</option>
            <option value="saturday">Saturday</option>
            <option value="sunday">Sunday</option>
        </select>
    <div class="error">
        <p>Please select a time</p>
    </div>  
    </div>
    <div class="input clearfix required">   
        <label for="time">Time</label> 
        <select name="time" id="time">
            <option value></option>
            <option value="12">12pm</option>
            <option value="3">3pm</option>
            <option value="4">4pm</option>
            <option value="6">6pm</option>
            <option value="7">7pm</option>
            <option value="9">9pm</option>
        </select>
    <div class="error">
        <p>Please select a time</p>
    </div>  
    </div>
    <div class="input">
        <input type="submit" value="Submit">
    </div>
</form>

JavaScript

$(document).ready(function(){
    $('#cinema').on('change', function(ev) {
                
        var opt=$("option:selected", this);
        var strExceptItems=opt.data("exceptitems");
        eval("my script here")
        var exceptItems= eval("(" + strExceptItems + ")");        
        if(exceptItems)
        {
            for (var id in exceptItems)
            {
                $('#'+id+' option').show();                       
                var items=exceptItems[id].split(",");
                for (i = 0; i < items.length; i++) {
                   $('#'+id+' option[value="'+items[i]+'"]').hide();
                }
            }
        }
    });  
});