JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<form action="/select_demo.php">
    <label for="ctlJob">Job Function:</label>
    <select name="id" id="ctlJob">
        <option value="1">Managers</option>
        <option value="2">Team Leaders</option>
        <option value="3">Developers</option>
    </select>
    <noscript>
        <input type="submit" name="action" value="Load Individuals" />
    </noscript>
    <label for="ctlPerson">Individual:</label>
    <select name="person_id" id="ctlPerson">
        <option value="1">Mark P</option>
        <option value="2">Andy Y</option>
        <option value="3">Richard B</option>
    </select>
    <input type="submit" name="action" value="Book" />
</form>

JavaScript

var data = [
            [
                {optionValue: 0,optionDisplay: 'Mark'},
                {optionValue: 1,optionDisplay: 'Andy'},
                {optionValue: 2,optionDisplay: 'Richard'}
                ],
            [
                {optionValue: 10,optionDisplay: 'Remy'},
                {optionValue: 11,optionDisplay: 'Arif'},
                {optionValue: 12, optionDisplay: 'JC'}
           ],
            [
                {optionValue: 20,optionDisplay: 'Aidan'},
                {optionValue: 21,optionDisplay: 'Russell'}
               ]
           ];


$("#ctlJob").change(function() {
    var $persons = $("#ctlPerson").empty();
    $.each(data[$(this).val() - 1], function() {
        $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
    });
});