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">
            <option value></option>
            <option value="maxima" data-command="$('#time option[value=12]').hide()">Cinema Maxima</option>
            <option value="rivola" data-command="$('#time option').show()">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

jQuery.fn.extend({
    executeCommand: function() {
        return this.on('change', function(ev) {
            var opt=$("option:selected", this);
            var strCommand=opt.data("command");
            eval(strCommand);
        });  
    }
});
$('#cinema').executeCommand();