JSFiddle - React, Tailwind, and code Playground

by tommcgee

HTML

<div class="container">
    <form>
        <div class="clearfix">
            <label for="program">Program</label>
            <select id="trigger" name="program" class="x-large">
                <option value="">(select)</option>
                <option value="1">Program One</option>
                <option value="2">Program Two</option>
            </select>
        </div>
        <div class="clearfix">
            <label for="issuer">Award Issuer</label>
            <select id="" class="xlarge switchable" name="issuer">
                <option value="Admissions" class="issuer_1">Admissions</option>
                <option value="Athletics" class="issuer_1">Athletics</option>
                <option value="Center for Multiculturalism and Civic Engagement" class="issuer_1">Center for Multiculturalism and Civic Engagement</option>
                <option value="Community Development" class="issuer_1">Community Development</option>
                <option value="Department of Public Safety and Security" class="issuer_1">Department of Public Safety and Security</option>
                <option value="DOVE" class="issuer_1">DOVE</option>
                <option value="Freshman Studies" class="issuer_1">Freshman Studies</option>
                <option value="Housing" class="issuer_1">Housing</option>
                <option value="Office of Dean of Students and Community Development" class="issuer_1">Office of Dean of Students and Community Development</option>
                <option value="ROTC" class="issuer_1">ROTC</option>
                <option value="SAB" class="issuer_1">SAB</option>
                <option value="School of Business" class="issuer_2">School of Business</option>
                <option value="Student Activities" class="issuer_1">Student Activities</option>
                <option value="The Career Center" class="issuer_1">The Career Center</option>
                <option value="TLTC" class="issuer_2">TLTC</option>
                <option...

JavaScript

var $j = jQuery.noConflict();
$j(document).ready(function () {
    $j("#trigger").change(function () {
        if ($j(this).data('options') == undefined) {
            $j(this).data('options', $j('select.switchable option').clone());
        }
        var id = $j(this).val();
        var that = this;
        $j("select.switchable").each(function () {
            var thisname = $j(this).attr('name');
            var theseoptions = $j(that).data('options').filter('.' + thisname + '_' + id);
            $j(this).html(theseoptions);
        });
    });
    //then fire it off once to display the correct elements
    $j('#trigger').trigger('change');
});